/* ====================================================
         ICON SWAP SYSTEM + PER-PRODUCT ANIMATIONS
         ==================================================== */
      .icon-ph { transition: opacity 0.18s; }
      .card:hover .icon-ph { opacity: 0; pointer-events: none; }
      .anim-wrap {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.18s 0.04s;
        pointer-events: none; color: #F59E0B;
      }
      .card:hover .anim-wrap { opacity: 1; }

      /* p1: Wire plug connect */
      .pa-p1L  { transform: translateX(-13px); }
      .pa-p1R  { transform: translateX(13px); }
      .pa-p1Spark { transform: scale(0); opacity: 0; }
      @keyframes p1L { to { transform: none; } }
      @keyframes p1R { to { transform: none; } }
      @keyframes p1Spark {
        0%,45%  { transform: scale(0); opacity: 0; }
        60%     { transform: scale(1.5); opacity: 1; }
        100%    { transform: scale(1); opacity: .9; }
      }
      .card:hover .pa-p1L     { animation: p1L 0.38s cubic-bezier(0.34,1.3,0.64,1) forwards; }
      .card:hover .pa-p1R     { animation: p1R 0.38s cubic-bezier(0.34,1.3,0.64,1) forwards; }
      .card:hover .pa-p1Spark { animation: p1Spark 0.6s ease forwards 0.28s; }

      /* p2: Cable draw */
      @keyframes p2Cable  { to { stroke-dashoffset: 0; } }
      @keyframes p2Dot    { 0%,10%  { opacity: 0; } 30%,100% { opacity: 1; } }
      @keyframes p2DotEnd { 0%,85%  { opacity: 0; } 100% { opacity: 1; } }
      .card:hover .pa-p2Cable   { animation: p2Cable  0.65s ease forwards; }
      .card:hover .pa-p2Dot     { animation: p2Dot    0.65s ease forwards; }
      .card:hover .pa-p2DotEnd  { animation: p2DotEnd 0.65s ease forwards; }

      /* p3: Pipe assembly */
      .pa-p3T  { transform: translateY(-16px); }
      .pa-p3B  { transform: translateY(16px); }
      .pa-p3Join  { opacity: 0; }
      .pa-p3Join2 { opacity: 0; }
      @keyframes p3T  { to { transform: none; } }
      @keyframes p3B  { to { transform: none; } }
      @keyframes p3Join { 0%,60% { opacity: 0; } 80%,100% { opacity: 0.8; } }
      .card:hover .pa-p3T    { animation: p3T    0.4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p3B    { animation: p3B    0.4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p3Join  { animation: p3Join 0.6s ease forwards; }
      .card:hover .pa-p3Join2 { animation: p3Join 0.6s ease forwards; }

      /* p4: Toggle switch */
      .pa-p4Knob  { transform-origin: 10px 16px; }
      .pa-p4Indi  { opacity: 0.3; }
      @keyframes p4Knob { to { transform: translateX(12px); } }
      @keyframes p4Indi { 0%,60% { opacity: 0.3; } 100% { opacity: 1; stroke: white; } }
      .card:hover .pa-p4Knob { animation: p4Knob 0.4s cubic-bezier(0.34,1.4,0.64,1) forwards; }
      .card:hover .pa-p4Indi { animation: p4Indi 0.5s ease forwards 0.2s; }

      /* p5: Plug prongs insert */
      .pa-p5Prongs { transform: translateY(-13px); }
      .pa-p5Spark circle { opacity: 0; }
      @keyframes p5Prongs { to { transform: none; } }
      @keyframes p5Spark { 0%,70% { opacity:0; r:0; } 85% { opacity:1; r:3; } 100% { opacity:0; r:4; } }
      .card:hover .pa-p5Prongs { animation: p5Prongs 0.42s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p5Spark circle { animation: p5Spark 0.6s ease forwards 0.35s; }

      /* p6: Circuit grid draw */
      @keyframes p6L1 { to { stroke-dashoffset: 0; } }
      @keyframes p6N  { 0%,80%  { opacity:0; } 100% { opacity:1; } }
      .card:hover .pa-p6L1 { animation: p6L1 0.28s ease forwards; }
      .card:hover .pa-p6L2 { animation: p6L1 0.28s ease forwards 0.14s; }
      .card:hover .pa-p6L3 { animation: p6L1 0.28s ease forwards 0.28s; }
      .card:hover .pa-p6L4 { animation: p6L1 0.28s ease forwards 0.42s; }
      .card:hover .pa-p6N  { animation: p6N  0.55s ease forwards 0.42s; }

      /* p7: Lamp rays */
      @keyframes p7R { to { stroke-dashoffset: 0; } }
      @keyframes p7Glow { 0%,60% { opacity:0; } 80%,100% { opacity:0.25; } }
      .card:hover .pa-p7R1 { animation: p7R 0.25s ease forwards; }
      .card:hover .pa-p7R2 { animation: p7R 0.25s ease forwards 0.1s; }
      .card:hover .pa-p7R3 { animation: p7R 0.25s ease forwards 0.1s; }
      .card:hover .pa-p7R4 { animation: p7R 0.25s ease forwards 0.2s; }
      .card:hover .pa-p7R5 { animation: p7R 0.25s ease forwards 0.2s; }
      .card:hover .pa-p7Glow { animation: p7Glow 0.6s ease forwards; }

      /* p8: Filament draw + glow */
      @keyframes p8Fil  { to { stroke-dashoffset: 0; } }
      @keyframes p8Glow { 0%,70% { opacity:0; r:7; } 85% { opacity:0.3; r:9; } 100% { opacity:0.15; r:8; } }
      .card:hover .pa-p8Fil  { animation: p8Fil  0.55s ease forwards; }
      .card:hover .pa-p8Glow { animation: p8Glow 0.75s ease forwards; }

      /* p9: Floodlight sweep */
      .pa-p9Beams { transform-origin: 13px 7px; transform: scaleX(0); opacity: 0; }
      .pa-p9Sweep { opacity: 0; }
      @keyframes p9Beams { to { transform: scaleX(1); opacity: 1; } }
      @keyframes p9Sweep {
        0%,30%    { opacity:0; }
        50%,60%   { opacity:0.9; }
        100%      { opacity:0; }
      }
      .card:hover .pa-p9Beams { animation: p9Beams 0.4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p9Sweep { animation: p9Sweep 0.8s ease forwards 0.1s; }

      /* p10: CCTV pan */
      .pa-p10Cam  { transform-origin: 16px 16px; }
      @keyframes p10Cam {
        0%   { transform: rotate(0); }
        30%  { transform: rotate(-18deg); }
        65%  { transform: rotate(18deg); }
        100% { transform: rotate(0); }
      }
      @keyframes p10Scan { to { stroke-dashoffset: 0; } }
      .card:hover .pa-p10Cam  { animation: p10Cam  0.8s cubic-bezier(0.4,0,0.2,1) forwards; }
      .card:hover .pa-p10Scan { animation: p10Scan 0.4s ease forwards 0.4s; }

      /* p11: Bell ring */
      .pa-p11Bell { transform-origin: 16px 4px; }
      @keyframes p11Bell {
        0%   { transform: rotate(0); }
        20%  { transform: rotate(-18deg); }
        45%  { transform: rotate(18deg); }
        65%  { transform: rotate(-10deg); }
        80%  { transform: rotate(8deg); }
        100% { transform: rotate(0); }
      }
      @keyframes p11R1 { 0%,20% { opacity:0; r:9;  } 60%,100% { opacity:0.6; r:12; } }
      @keyframes p11R2 { 0%,40% { opacity:0; r:13; } 80%,100% { opacity:0.3; r:16; } }
      .card:hover .pa-p11Bell { animation: p11Bell 0.8s ease forwards; }
      .card:hover .pa-p11R1   { animation: p11R1   0.8s ease forwards; }
      .card:hover .pa-p11R2   { animation: p11R2   0.85s ease forwards; }

      /* p12: Door open + card swipe */
      .pa-p12Door  { transform-origin: 8px 16px; }
      @keyframes p12Door  { to { transform: perspective(80px) rotateY(-45deg) translateX(2px); } }
      @keyframes p12Card  { 0%,50% { opacity:0; } 70%,100% { opacity:1; } }
      @keyframes p12Swipe { 0%,50% { stroke-dashoffset:12; opacity:0; } 80%,100% { stroke-dashoffset:0; opacity:0.8; } }
      .card:hover .pa-p12Door  { animation: p12Door  0.4s cubic-bezier(0.34,1.1,0.64,1) forwards; }
      .card:hover .pa-p12Card  { animation: p12Card  0.5s ease forwards 0.3s; }
      .card:hover .pa-p12Swipe { animation: p12Swipe 0.5s ease forwards 0.35s; }

      /* p13: Fan spin */
      .pa-p13Spin { transform-origin: 16px 16px; transform: rotate(0deg); }
      @keyframes p13Spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(270deg); }
      }
      .card:hover .pa-p13Spin { animation: p13Spin 0.7s cubic-bezier(0.2,0,0.4,1) forwards; }

      /* p14: Thermometer fill */
      .pa-p14Fill rect { transition: none; }
      @keyframes p14Fill  {
        0%   { height: 0;  y: 22; opacity: 0; }
        30%  { opacity: 1; }
        100% { height: 10; y: 12; opacity: 1; }
      }
      @keyframes p14FillCircle  { 0%,20% { opacity: 0; } 60%,100% { opacity: 0.85; } }
      @keyframes p14Steam { 0%,60% { opacity:0; transform:translateY(0); } 100% { opacity:0.8; transform:translateY(-6px); } }
      .card:hover .pa-p14Fill rect   { animation: p14Fill       0.55s ease forwards; }
      .card:hover .pa-p14Fill circle { animation: p14FillCircle 0.55s ease forwards; }
      .card:hover .pa-p14Steam path  { animation: p14Steam 0.7s ease forwards 0.4s; }

      /* p15: Battery charge */
      @keyframes p15Fill {
        from { width: 0; }
        to   { width: 22; }
      }
      @keyframes p15Bolt { 0%,40% { opacity:0; } 60%,80% { opacity:1; } 100% { opacity:0.7; } }
      .card:hover .pa-p15Fill { animation: p15Fill 0.55s cubic-bezier(0.4,0,0.2,1) forwards; }
      .card:hover .pa-p15Bolt { animation: p15Bolt 0.65s ease forwards; }

      /* p16: MCB lever trip */
      .pa-p16Lever { transform-origin: 16px 10px; }
      @keyframes p16Lever {
        0%   { transform: translateY(0); }
        40%  { transform: translateY(8px) rotate(12deg); }
        100% { transform: translateY(0) rotate(0); }
      }
      @keyframes p16Arc { 0%,30% { opacity:0; } 45%,60% { opacity:1; } 100% { opacity:0; } }
      .card:hover .pa-p16Lever { animation: p16Lever 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
      .card:hover .pa-p16Arc   { animation: p16Arc   0.6s ease forwards; }

      /* p17: Shield halves assemble + checkmark */
      .pa-p17SL { transform: translateX(-10px) scaleX(0.5); transform-origin: 16px 16px; opacity: 0; }
      .pa-p17SR { transform: translateX(10px) scaleX(0.5);  transform-origin: 16px 16px; opacity: 0; }
      @keyframes p17SL { to { transform: none; opacity: 1; } }
      @keyframes p17SR { to { transform: none; opacity: 1; } }
      @keyframes p17Check { to { stroke-dashoffset: 0; } }
      .card:hover .pa-p17SL    { animation: p17SL    0.4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p17SR    { animation: p17SR    0.4s cubic-bezier(0.34,1.2,0.64,1) forwards; }
      .card:hover .pa-p17Check { animation: p17Check 0.4s ease forwards 0.32s; }

      /* p18: Lightning strike + deflect */
      @keyframes p18Bolt    { to { stroke-dashoffset: 0; } }
      @keyframes p18Impact {
        0%,50%  { opacity:0; transform:scale(0); }
        65%     { opacity:0.8; transform:scale(1.2); }
        100%    { opacity:0; transform:scale(1.5); }
      }
      @keyframes p18Deflect { 0%,55% { opacity:0; } 75%,100% { opacity:1; } }
      .card:hover .pa-p18Bolt    { animation: p18Bolt    0.5s ease forwards; }
      .card:hover .pa-p18Impact  { animation: p18Impact  0.7s ease forwards; transform-origin: 14px 15px; }
      .card:hover .pa-p18Deflect { animation: p18Deflect 0.6s ease forwards 0.3s; }