.hero-media-bg-animtion svg { width: 63vw; height: auto; cursor: pointer; } /* Apply transition to all paths for smooth movement and color changes */ .hero-media-bg-animtion svg path { transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1), fill 0.6s ease; } /* Hover States for all 29 paths */ .hero-media-bg-animtion svg:hover .ani-path1 { d: path("M706.75 306.632L552.062 306.632L552.062 382.023L706.75 382.023L706.75 306.632Z"); } .hero-media-bg-animtion svg:hover .ani-path2 { d: path("M629.576 382.023C629.576 381.573 629.645 381.123 629.645 380.673C629.645 340.246 594.906 307.403 552.062 307.403L552.062 382.023L629.576 382.023Z"); } .hero-media-bg-animtion svg:hover .ani-path6 { d: path("M966.615 212.101V306.632H1034.26V212.101H966.615Z"); } .hero-media-bg-animtion svg:hover .ani-path7 { d: path("M1034.26 108.794V306.598H1070.61V108.794H1034.26Z"); } .hero-media-bg-animtion svg:hover .ani-path8 { d: path("M1259.78 196.821C1280.02 177.22 1280.02 145.44 1259.78 125.839C1239.54 106.238 1206.73 106.238 1186.49 125.839C1166.25 145.44 1166.25 177.22 1186.49 196.821C1206.73 216.423 1239.54 216.423 1259.78 196.821Z"); } .hero-media-bg-animtion svg:hover .ani-path9 { d: path("M583.79 305.821C600.227 305.821 613.111 292.489 612.568 276.044C612.024 259.598 598.26 246.266 581.823 246.266C565.386 246.266 552.502 259.598 553.045 276.044C553.588 292.489 567.353 305.821 583.79 305.821Z"); } .hero-media-bg-animtion svg:hover .ani-path10 { d: path("M706.75 156.533V306.082H864.89V156.533H706.75Z"); } .hero-media-bg-animtion svg:hover .ani-path11 { d: path("M836.548 184.882H745.932V278.646H836.548V184.882Z"); } .hero-media-bg-animtion svg:hover .ani-path12 { d: path("M725.035 231.77L791.264 295.915L857.492 231.77L791.264 167.625L725.035 231.77Z"); } .hero-media-bg-animtion svg:hover .ani-path13 { d: path("M744.972 232.536L790.475 278.088L837.507 231.005L792.004 185.452L744.972 232.536Z"); } .hero-media-bg-animtion svg:hover .ani-path14 { d: path("M864.889 110.146V306.354H966.402V110.146H864.889Z"); } .hero-media-bg-animtion svg:hover .ani-path15 { d: path("M965.279 108.793H866.293V210.595H965.279V108.793Z"); } .hero-media-bg-animtion svg:hover .ani-path16 { d: path("M898.488 210.596V410.525H966.579V210.596H898.488Z"); } .hero-media-bg-animtion svg:hover .ani-path17 { d: path("M1072.51 317.2C1071.88 317.2 1071.17 317.2 1070.55 317.114V410.525H1274.82V214.49H1178.64C1178.64 271.226 1131.09 317.2 1072.51 317.2Z"); } .hero-media-bg-animtion svg:hover .ani-path19 { d: path("M0 306.248C0 278.946 25.7635 256.144 60.1371 250.72C61.0048 246.037 61.472 241.168 61.472 236.176C61.472 197.473 33.9731 166.104 0 166.104V306.248V306.248Z"); } .hero-media-bg-animtion svg:hover .ani-path20 { d: path("M0 306.248H227.565C227.565 259.268 176.585 221.131 113.832 221.131C105.751 221.131 97.8697 221.776 90.1878 222.973C81.3087 270.598 44.3955 306.248 0 306.248Z"); } .hero-media-bg-animtion svg:hover .ani-path21 { d: path("M0 306.248C44.3386 306.248 81.3874 270.564 90.2751 222.893C38.7464 231.099 0 265.308 0 306.248Z"); } .hero-media-bg-animtion svg:hover .ani-path22 { d: path("M277.672 157.029V201.894H396.243V157.029H277.672Z"); } .hero-media-bg-animtion svg:hover .ani-path23 { d: path("M277.623 258.996V306.632H396.195V258.996H277.623Z"); } .hero-media-bg-animtion svg:hover .ani-path24 { d: path("M227.818 157.029L227.818 414.014H277.623V157.029H227.818Z"); } .hero-media-bg-animtion svg:hover .ani-path25 { d: path("M252.606 410.798C265.431 410.798 275.829 401.197 275.829 389.355C275.829 377.512 265.431 367.912 252.606 367.912C239.78 367.912 229.383 377.512 229.383 389.355C229.383 401.197 239.78 410.798 252.606 410.798Z"); } .hero-media-bg-animtion svg:hover .ani-path26 { d: path("M252.606 309.324C265.431 309.324 275.829 299.723 275.829 287.881C275.829 276.038 265.431 266.438 252.606 266.438C239.78 266.438 229.383 276.038 229.383 287.881C229.383 299.723 239.78 309.324 252.606 309.324Z"); } .hero-media-bg-animtion svg:hover .ani-path27 { d: path("M252.606 201.894C265.431 201.894 275.829 192.294 275.829 180.451C275.829 168.609 265.431 159.008 252.606 159.008C239.78 159.008 229.383 168.609 229.383 180.451C229.383 192.294 239.78 201.894 252.606 201.894Z"); } .hero-media-bg-animtion svg:hover .ani-path28 { d: path("M396.221 156.533V306.632H552.062V156.533H396.221Z"); } .hero-media-bg-animtion svg .ani-path29, .hero-media-bg-animtion svg .ani-path3, .hero-media-bg-animtion svg .hero-media-bg-animtion svg .ani-path4, .hero-media-bg-animtion svg .ani-path5, .hero-media-bg-animtion svg .ani-path15, .hero-media-bg-animtion svg .ani-path11, .hero-media-bg-animtion svg .ani-path13 { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* This is the magic fix for "own space" rotation */ transform-box: fill-box; transform-origin: center; } .hero-media-bg-animtion svg .ani-path24 { /* Set the starting point in CSS to match the new HTML structure */ d: path("M227.817 263.981L227.817 414.014L277.622 414.014L277.622 263.981L227.817 263.981Z"); transition: d 0.8s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease; } .hero-media-bg-animtion svg:hover .ani-path24 { /* The points now match 1-to-1 with the starting path */ d: path("M227.818 157.029L227.818 414.014L277.623 414.014L277.623 157.029L227.818 157.029Z"); } /* 2. HOVER ANIMATIONS: Rotate in place */ /* Path 29: Circular shape rotation */ .hero-media-bg-animtion svg:hover .ani-path29 { transform: rotate(90deg); } .hero-media-bg-animtion svg .ani-g-345 { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* This is the magic fix for "own space" rotation */ transform-box: fill-box; transform-origin: center; } /* Paths 3, 4, 5: Small bars rotating 90 degrees */ .hero-media-bg-animtion svg:hover .ani-g-345 { transform: rotate(90deg); } /* Path 15: Rectangular shape flip */ .hero-media-bg-animtion svg:hover .ani-path15 { transform: rotate(90deg); d: path("M965.279 108.793H866.293V210.595H965.279V108.793Z"); } /* Path 11 & 13: Diamonds spinning */ .hero-media-bg-animtion svg:hover .ani-path11 { transform: rotate(90deg); d: path("M836.548 184.882H745.932V278.646H836.548V184.882Z"); } .hero-media-bg-animtion svg:hover .ani-path13 { transform: rotate(-90deg); d: path("M744.972 232.536L790.475 278.088L837.507 231.005L792.004 185.452L744.972 232.536Z"); } .bot-group121415 { transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Critical for rotating in place */ transform-origin: center; transform-box: fill-box; transform: rotate(0); } /* 1. Core Transition Settings */ .bottom-animtion-svg path { transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Critical for rotating in place */ transform-origin: center; transform-box: fill-box; } .bottom-animtion-svg .bot-ani40 { transform: rotate(0); } .bottom-animtion-svg .bot-ani32{ transition: d 0.8s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s; } .bottom-animtion-svg .bot-ani21,.bottom-animtion-svg .bot-ani23 { transform: rotate(0); } /* 2. Shape Morphing (Moving the paths) */ .bottom-animtion-svg:hover .bot-ani10 { d: path("M1760.41 40.7426L1760.41 399.265L1864.76 399.265L1864.76 40.7426L1760.41 40.7426"); } .bottom-animtion-svg .bot-ani32 { transition: d 0.8s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease; vector-effect: non-scaling-stroke; /* Helps stabilize path calculations */ } .bottom-animtion-svg:hover .bot-ani16 { d: path("M1297.45 288.714V399.265H1376.64V288.714H1297.45Z"); } .bottom-animtion-svg:hover .bot-ani17 { d: path("M1376.64 167.898V399.225H1419.2V167.898H1376.64Z"); } .bottom-animtion-svg:hover .bot-ani18 { d: path("M1640.66 270.844C1664.36 247.922 1664.36 210.756 1640.66 187.833C1616.97 164.91 1578.55 164.91 1554.86 187.833C1531.17 210.756 1531.17 247.922 1554.86 270.844C1578.55 293.767 1616.97 293.767 1640.66 270.844Z"); } .bottom-animtion-svg:hover .bot-ani19 { d: path("M849.256 398.315C868.499 398.315 883.583 382.724 882.947 363.491C882.311 344.259 866.196 328.668 846.953 328.668C827.71 328.668 812.626 344.259 813.262 363.491C813.898 382.724 830.013 398.315 849.256 398.315Z"); } .bottom-animtion-svg:hover .bot-ani25 { transform: rotate(0); } .bottom-animtion-svg:hover .bot-ani26 { d: path("M1217.69 286.952V520.764H1297.4V286.952H1217.69Z"); } .bottom-animtion-svg:hover .bot-ani29 { d: path("M165.789 398.815C165.789 366.887 195.951 340.22 236.194 333.877C237.21 328.4 237.757 322.706 237.757 316.868C237.757 271.607 205.563 234.922 165.789 234.922V398.815V398.815Z"); } .bottom-animtion-svg:hover .bot-ani32 { d: path("M0 236.701L0 539.125L165.789 539.125L165.789 236.701L0 236.701Z"); } .bottom-animtion-svg:hover .bot-ani33 { d: path("M490.871 224.309V276.777H629.688V224.309H490.871Z"); } .bottom-animtion-svg:hover .bot-ani34 { d: path("M490.813 343.556V399.265H629.63V343.556H490.813Z"); } .bottom-animtion-svg:hover .bot-ani35 { d: path("M432.505 224.309V524.845H490.813V224.309H432.505Z"); } .bottom-animtion-svg:hover .bot-ani38 { d: path("M461.524 276.777C476.54 276.777 488.712 265.55 488.712 251.701C488.712 237.851 476.54 226.624 461.524 226.624C446.508 226.624 434.336 237.851 434.336 251.701C434.336 265.55 446.508 276.777 461.524 276.777Z"); } .bottom-animtion-svg:hover .bot-ani40 { transform: rotate(90deg);} .bottom-animtion-svg:hover .bot-ani21 { transform: rotate(90deg); } .bottom-animtion-svg:hover .bot-ani23 { transform: rotate(-90deg); } .bottom-animtion-svg:hover .bot-ani25 { transform: rotate(90deg); } .bottom-animtion-svg:hover .bot-group121415 { transform: rotate(90deg);} /* Example: Making specific shapes pulse or spin fully */ .bottom-animtion-svg:hover .bot-ani18 { transform: rotate(180deg); } .bottom-animtion-svg:hover .bot-ani36, .bottom-animtion-svg:hover .bot-ani37, .bottom-animtion-svg:hover .bot-ani38 { transform: scale(1.1) rotate(10deg); } /* Base settings for the SVG paths */ .hover-nai-style3 path { transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), fill 0.7s ease; } /* Hover state triggered when mouse enters the SVG container */ .event-bg-ext { opacity: 0; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .hover-nai-style3:hover .event-bg-ext { opacity: 1; } .box-group-sm { transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Critical for rotating in place */ transform-origin: center; transform-box: fill-box; transform: rotate(0); } .hover-nai-style3:hover .box-group-sm { transform: rotate(90deg); } .hover-nai-style3 .event-ani25,.hover-nai-style3 .event-ani23,.hover-nai-style3 .event-ani21 { transform-origin: center; transition: d 0.7s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease-in-out, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-box: fill-box; transform: rotate(0deg); } .hover-nai-style3:hover .event-ani25 { transform: rotate(90deg); } /* Path 10: Rectangle stretching/growing */ .hover-nai-style3:hover .event-ani10 { d: path("M403.116 40.7431L403.116 399.265L298.772 399.265L298.772 40.7431L403.116 40.7431Z"); } /* Path 16: Width/X-position change */ .hover-nai-style3:hover .event-ani16 { d: path("M866.084 288.714V399.265H786.892V288.714H866.084Z"); } /* Path 17: Vertical stretch */ .hover-nai-style3:hover .event-ani17 { d: path("M786.892 167.899V399.225H744.329V167.899H786.892Z"); } /* Path 18: Movement of the circle (Moving left/right) */ .hover-nai-style3:hover .event-ani18 { d: path("M522.868 270.844C499.174 247.922 499.174 210.756 522.868 187.833C546.561 164.91 584.975 164.91 608.669 187.833C632.362 210.756 632.362 247.922 608.669 270.844C584.975 293.767 546.561 293.767 522.868 270.844Z"); } /* Path 19: Vertical shift of the small circle */ .hover-nai-style3:hover .event-ani19 { d: path("M1314.27 398.315C1295.03 398.315 1279.95 382.724 1280.58 363.492C1281.22 344.259 1297.33 328.668 1316.58 328.668C1335.82 328.668 1350.9 344.259 1350.27 363.492C1349.63 382.724 1333.52 398.315 1314.27 398.315Z"); } /* Path 21: Rectangular morph */ .hover-nai-style3:hover .event-ani21 { transform: rotate(90deg); } /* Path 23: Rhombus/Diamond morph */ .hover-nai-style3:hover .event-ani23 { transform: rotate(45deg); } .hover-nai-style3:hover .event-ani25 { transform: rotate(-90deg); } /* Path 26: Large vertical growth */ .hover-nai-style3:hover .event-ani26 { d: path("M945.844 286.953V520.765H866.128V286.953H945.844Z"); } @media (max-width: 1700px) { .hero-media-bg-animtion svg { width: 61vw; height: auto; cursor: pointer; } } @media (max-width: 1630px) { .hero-media-bg-animtion svg { width: 58vw; height: auto; cursor: pointer; } } @media(max-width: 991px) { .hero-media-bg-animtion svg { width: 100%; height: auto; cursor: pointer; } }