{"id":716,"date":"2025-12-11T21:47:03","date_gmt":"2025-12-11T21:47:03","guid":{"rendered":"https:\/\/slider.brightvisiondesign.ir\/?page_id=716"},"modified":"2025-12-16T13:14:14","modified_gmt":"2025-12-16T13:14:14","slug":"slider-3","status":"publish","type":"page","link":"https:\/\/slider.brightvisiondesign.ir\/?page_id=716","title":{"rendered":"slider.3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"716\" class=\"elementor elementor-716\" data-elementor-post-type=\"page\">\n\t\t\t\t<header class=\"elementor-element elementor-element-2c7e7af e-con-full e-flex e-con e-parent\" data-id=\"2c7e7af\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-5e98d41 e-con-full e-flex e-con e-child\" data-id=\"5e98d41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5c5bea elementor-widget elementor-widget-button\" data-id=\"f5c5bea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u200bFree consultation<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe10131 e-con-full e-flex e-con e-child\" data-id=\"fe10131\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1c4480 elementor-nav-menu__align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu\" data-id=\"a1c4480\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;layout&quot;:&quot;horizontal&quot;,&quot;submenu_icon&quot;:{&quot;value&quot;:&quot;&lt;svg aria-hidden=\\&quot;true\\&quot; class=\\&quot;e-font-icon-svg e-fas-caret-down\\&quot; viewBox=\\&quot;0 0 320 512\\&quot; xmlns=\\&quot;http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\&quot;&gt;&lt;path d=\\&quot;M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\&quot;&gt;&lt;\\\/path&gt;&lt;\\\/svg&gt;&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;toggle&quot;:&quot;burger&quot;}\" data-widget_type=\"nav-menu.default\">\n\t\t\t\t\t\t\t\t<nav aria-label=\"\u0645\u0646\u0648\" class=\"elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade\">\n\t\t\t\t<ul id=\"menu-1-a1c4480\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1551\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/\" class=\"elementor-item\">slider.1<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1550\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=214\" class=\"elementor-item\">slider.2<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1549\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=716\" class=\"elementor-item\">slider.3<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1552\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=805\" class=\"elementor-item\">slider.4<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1548\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=1011\" class=\"elementor-item\">SLIDER.5<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1629\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=1627\" class=\"elementor-item\">slider.6<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t<div class=\"elementor-menu-toggle\" role=\"button\" tabindex=\"0\" aria-label=\"\u062a\u0646\u0638\u06cc\u0645 \u0645\u0646\u0648\" aria-expanded=\"false\">\n\t\t\t<svg aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--open e-font-icon-svg e-eicon-menu-bar\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M104 333H896C929 333 958 304 958 271S929 208 896 208H104C71 208 42 237 42 271S71 333 104 333ZM104 583H896C929 583 958 554 958 521S929 458 896 458H104C71 458 42 487 42 521S71 583 104 583ZM104 833H896C929 833 958 804 958 771S929 708 896 708H104C71 708 42 737 42 771S71 833 104 833Z\"><\/path><\/svg><svg aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--close e-font-icon-svg e-eicon-close\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z\"><\/path><\/svg>\t\t<\/div>\n\t\t\t\t\t<nav class=\"elementor-nav-menu--dropdown elementor-nav-menu__container\" aria-hidden=\"true\">\n\t\t\t\t<ul id=\"menu-2-a1c4480\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1551\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/\" class=\"elementor-item\" tabindex=\"-1\">slider.1<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1550\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=214\" class=\"elementor-item\" tabindex=\"-1\">slider.2<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1549\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=716\" class=\"elementor-item\" tabindex=\"-1\">slider.3<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1552\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=805\" class=\"elementor-item\" tabindex=\"-1\">slider.4<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1548\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=1011\" class=\"elementor-item\" tabindex=\"-1\">SLIDER.5<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1629\"><a href=\"https:\/\/slider.brightvisiondesign.ir\/?page_id=1627\" class=\"elementor-item\" tabindex=\"-1\">slider.6<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-024e394 e-con-full e-flex e-con e-child\" data-id=\"024e394\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf15acf elementor-widget elementor-widget-image\" data-id=\"bf15acf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2480\" height=\"1428\" src=\"https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2.png\" class=\"attachment-full size-full wp-image-735\" alt=\"\" srcset=\"https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2.png 2480w, https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2-300x173.png 300w, https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2-1024x590.png 1024w, https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2-768x442.png 768w, https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2-1536x884.png 1536w, https:\/\/slider.brightvisiondesign.ir\/wp-content\/uploads\/2025\/12\/logo\u06f1\u06f2-2048x1179.png 2048w\" sizes=\"(max-width: 2480px) 100vw, 2480px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t<div class=\"elementor-element elementor-element-ccd7546 e-con-full e-flex e-con e-parent\" data-id=\"ccd7546\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-73bb701 e-con-full e-flex e-con e-child\" data-id=\"73bb701\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-3fcbdb0 e-con-full container e-flex e-con e-child\" data-id=\"3fcbdb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcf1758 elementor-widget elementor-widget-heading\" data-id=\"dcf1758\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">vision pro<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-516868e elementor-widget elementor-widget-heading\" data-id=\"516868e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u200bInnovation you can see, hear and feel<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83022e9 elementor-widget elementor-widget-html\" data-id=\"83022e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"cards stacked\" >\r\n            <div class=\"card\">\r\n                <div class=\"popup-showcase one\">#Innovation<\/div>\r\n            <\/div>\r\n            <div class=\"card\">\r\n\r\n                <div class=\"popup one\">#Technology<\/div>\r\n            <\/div>\r\n            <div class=\"card\">\r\n                <div class=\"popup-showcase two\">#Glasses<\/div>\r\n            <\/div>\r\n            <div class=\"card\"> <\/div>\r\n            <div class=\"card\"> <\/div>\r\n            <div class=\"card\">\r\n\r\n\r\n            <\/div>\r\n            <div class=\"card\">\r\n                <div class=\"popup two\">#VR  Glasses<\/div>\r\n            <\/div>\r\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eaf3aa7 e-con-full spacing-huge e-flex e-con e-child\" data-id=\"eaf3aa7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7add250 e-con-full showcase e-flex e-con e-child\" data-id=\"7add250\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f65b4c badge-showcase elementor-widget elementor-widget-heading\" data-id=\"5f65b4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">vision pro<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7b39dd elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"f7b39dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u200bInnovation you can see, hear and feel<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f088d29 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"f088d29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u06cc\u0646 \u0645\u062a\u0646 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f. \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f \u0633\u0627\u062f\u06af\u06cc \u0646\u0627\u0645\u0641\u0647\u0648\u0645 \u0627\u0632 \u0635\u0646\u0639\u062a \u0686\u0627\u067e \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0637\u0631\u0627\u062d\u0627\u0646 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0633\u062a.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34f845e e-con-full button-wrapper-showcase e-flex e-con e-child\" data-id=\"34f845e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-908dabd elementor-align-left text-showcase elementor-widget elementor-widget-button\" data-id=\"908dabd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">us to  conect<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-99bf301 e-con-full e-flex e-con e-child\" data-id=\"99bf301\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da54d29 elementor-widget elementor-widget-html\" data-id=\"da54d29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n     body, html {\r\n\r\n\r\n     position: relative;\r\n     overflow-x: hidden;\r\n     margin: 0;\r\n     background-color: #111111;\r\n }\r\n\r\n\r\n\r\n .container {\r\n     position: relative;\r\n     display: grid;\r\n     justify-content: center;\r\n     place-items: center;\r\n     gap: 1.5rem;\r\n\r\n\r\n\r\n\r\n }\r\n\r\n .cards {\r\n     position: relative;\r\n\r\n     height: 250px;\r\n     display: flex;\r\n     justify-content: center;\r\n     --card-width: 200px;\r\n     --spacing: calc(var(--card-width) \/ 2);\r\n     opacity: 0;\r\n\r\n\r\n }\r\n\r\n .card {\r\n     width: var(--card-width);\r\n     height: var(--card-width);\r\n     position: absolute;\r\n     top: 0;\r\n     left: 50%;\r\n     border-radius: 1rem;\r\n     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n     display: flex;\r\n     align-items: center;\r\n     justify-content: center;\r\n\r\n\r\n\r\n\r\n     \/* CSS transforms for different states *\/\r\n     transform: translateX(-50%);\r\n     \/* Add smooth transition for transform changes *\/\r\n     transform-origin: center center;\r\n     \/* background-image: url(\"..\/img\/Espresso\\ on\\ Drip\\ Tray.png\"); *\/\r\n     background-size: cover;\r\n\r\n }\r\n\r\n .cards.spread .card {\r\n     transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n\r\n }\r\n\r\n \/* bg image *\/\r\n\r\n  .cards .card:nth-child(1) {\r\n  background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/3-1.jpg\");\r\n\r\n  }\r\n  .cards .card:nth-child(2) {\r\nbackground-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/9-e1753965396328.webp\");\r\n\r\n  }\r\n  .cards .card:nth-child(3) {\r\n background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/2-1-e1753963866836.jpg\");\r\n\r\n  }\r\n  .cards .card:nth-child(4) {\r\n  background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/7-1.jpg\");\r\n\r\n  }\r\n  .cards .card:nth-child(5) {\r\n     background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/1-e1753965118363.jpg\");\r\n\r\n  }\r\n  .cards .card:nth-child(6) {\r\n  background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/6-e1753965295131.jpg\");\r\n\r\n  }\r\n  .cards .card:nth-child(7) {\r\n background-image: url(\"https:\/\/lightsteelblue-raccoon-767783.hostingersite.com\/wp-content\/uploads\/2025\/07\/4-1.jpg\");\r\n\r\n object-fit: cover;\r\n  }\r\n\r\n \/* Stacked state transforms *\/\r\n .cards.stacked .card:nth-child(1) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(2) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(3) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(4) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(5) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(6) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n .cards.stacked .card:nth-child(7) {\r\n     transform: translateX(-50%) rotate(-10deg);\r\n\r\n }\r\n\r\n\r\n \/* Spread state transforms *\/\r\n .cards.spread .card:nth-child(1) {\r\n     transform: translate(calc(-50% - var(--spacing) * 3.6), 40px) rotate(-12deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(2) {\r\n     transform: translate(calc(-50% - var(--spacing) * 2.4), -10px) rotate(-6deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(3) {\r\n     transform: translate(calc(-50% - var(--spacing) * 1.3), 10px) rotate(-4deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(4) {\r\n     transform: translate(calc(-50% + 0px), 10px) rotate(0deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(5) {\r\n     transform: translate(calc(-50% + var(--spacing) * 1.3), 10px) rotate(4deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(6) {\r\n     transform: translate(calc(-50% + var(--spacing) * 2.4), 20px) rotate(8deg);\r\n }\r\n\r\n .cards.spread .card:nth-child(7) {\r\n     transform: translate(calc(-50% + var(--spacing) * 3.6), 10px) rotate(12deg);\r\n }\r\n\r\n\r\n\r\n \/* vertical stacking *\/\r\n\r\n .cards.verticalspread .card:nth-child(1) {\r\n     transform: translate(0%, 0%) scale(1);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(2) {\r\n     transform: translate(45%, 25%) scale(0.97);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(3) {\r\n     transform: translate(90%, 50%) scale(0.94);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(4) {\r\n     transform: translate(135%, 75%) scale(0.91);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(5) {\r\n     transform: translate(180%, 100%) scale(0.88);\r\n\r\n }\r\n\r\n .cards.verticalspread .card:nth-child(6) {\r\n     transform: translate(225%, 125%) scale(0.85);\r\n\r\n }\r\n\r\n \/* Popup styles *\/\r\n .popup,\r\n .popup-showcase {\r\n     position: absolute;\r\n     top: -50px;\r\n     left: 50%;\r\n     transform: translateX(-50%) scale(0);\r\n     background: #333;\r\n     color: white;\r\n     padding: 8px 12px;\r\n     border-radius: 6px;\r\n     font-size: 14px;\r\n     font-weight: bold;\r\n     font-family: \"DM Sans\", Sans-serif;\r\n     white-space: nowrap;\r\n     opacity: 0;\r\n     z-index: 10;\r\n     pointer-events: none;\r\n }\r\n\r\n .popup::after,\r\n .popup-showcase::after {\r\n     content: '';\r\n     position: absolute;\r\n     top: 100%;\r\n     left: 70%;\r\n     transform: translateX(-50%);\r\n     border: 6px solid transparent;\r\n\r\n }\r\n\r\n .popup.one {\r\n     background-color: #FE891D;\r\n }\r\n\r\n .popup.one::after {\r\n     border-top-color: #FE891D;\r\n\r\n }\r\n .popup.two {\r\n     background-color: #A104CA;\r\n }\r\n\r\n .popup.two::after {\r\n     border-top-color: #A104CA;\r\n\r\n }\r\n .popup-showcase.one {\r\n     background-color: #FD871A;\r\n }\r\n\r\n  .popup-showcase.one::after {\r\n     border-top-color: #FD871A;\r\n\r\n }\r\n .popup-showcase.two {\r\n     background-color: #A31A9C;\r\n }\r\n\r\n .popup-showcase.two::after {\r\n     border-top-color: #A31A9C;\r\n\r\n }\r\n\r\n \/* Popup visible state *\/\r\n .popup.show {\r\n     transform: translateX(-50%) scale(1);\r\n     opacity: 1;\r\n }\r\n\r\n .text-landing {\r\n     text-align: center;\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n .text-landing {\r\n     position: relative;\r\n     z-index: -1;\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n .card {\r\n     will-change: transform;\r\n }\r\n\r\n \/* Tablet - Hide cards 4, 5, 6, 7 - only show first 3 cards *\/\r\n @media (max-width: 768px) {\r\n\r\n     .card:nth-child(1),\r\n     .card:nth-child(2),\r\n     .card:nth-child(6),\r\n     .card:nth-child(7) {\r\n         display: none;\r\n     }\r\n\r\n     .container {\r\n         height: 80vh;\r\n         align-content: center;\r\n         gap: 2.5rem;\r\n     }\r\n\r\n     .cards {\r\n         position: relative;\r\n         width: auto;\r\n         height: 200px;\r\n         display: flex;\r\n         justify-content: center;\r\n         --card-width: 150px;\r\n         --spacing: calc(var(--card-width) \/ 2);\r\n         opacity: 0;\r\n     }\r\n\r\n\r\n\r\n\r\n\r\n\r\n }\r\n\r\n\r\n }\r\n<\/style>\r\n\r\n\r\n\r\n\r\n\r\n <script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js?ver=1759923652\"><\/script>\r\n    <script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js?ver=1759923652\"><\/script>\r\n    <script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/npm\/gsap@3.13.0\/dist\/SplitText.min.js?ver=1759923652\"><\/script>\r\n    <script data-minify=\"1\" src=\"https:\/\/nicolaipalmkvist.com\/wp-content\/cache\/min\/1\/lenis@1.3.8\/dist\/lenis.min.js?ver=1759923652\"><\/script>\r\n\r\n <script>\r\n        \/\/ Initialize a new Lenis instance for smooth scrolling\r\n        \/\/ Initialize Lenis\r\n        const lenis = new Lenis({\r\n            autoRaf: true,\r\n        });\r\n\r\n        \/\/ Listen for the scroll event and log the event data\r\n        lenis.on('scroll', (e) => {\r\n\r\n        });\r\n\r\n    <\/script>\r\n\r\n\r\n    <script>\r\n        gsap.registerPlugin(SplitText)\r\n        gsap.registerPlugin(ScrollTrigger)\r\n\r\n\/\/ GSAP Timeline for professional header entrance animation\r\n\/\/ GSAP Timeline for professional header entrance animation\r\nfunction initHeaderAnimation() {\r\n   \/\/ Create master timeline\r\n   const tl = gsap.timeline();\r\n\r\n   \/\/ Set initial states - fade in from below with blur\r\n   gsap.set(\".logo-container img\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   gsap.set(\".links-wrapper .hfe-nav-menu li\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   gsap.set(\".hfe-nav-menu__toggle\", {\r\n       opacity: 0,\r\n       y: 50,\r\n       filter: \"blur(10px)\"\r\n   });\r\n\r\n   \/\/ Animate logo entrance\r\n   tl.to(\".logo-container img\", {\r\n       duration: 1,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       ease: \"power2.out\"\r\n   })\r\n\r\n   \/\/ Animate navigation items with reverse stagger (last item first)\r\n   .to(\".links-wrapper .hfe-nav-menu li\", {\r\n       duration: 0.8,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       stagger: {\r\n           each: 0.15,\r\n           from: \"end\"\r\n       },\r\n       ease: \"power2.out\"\r\n   }, \"-=0.6\")\r\n\r\n   \/\/ Animate mobile toggle\r\n   .to(\".hfe-nav-menu__toggle\", {\r\n       duration: 0.7,\r\n       opacity: 1,\r\n       y: 0,\r\n       filter: \"blur(0px)\",\r\n       ease: \"power2.out\"\r\n   }, \"-=0.4\");\r\n\r\n   return tl;\r\n}\r\n\r\n\/\/ Function to replay animation\r\nfunction replayAnimation() {\r\n   initHeaderAnimation();\r\n}\r\n\r\n\/\/ Initialize when page loads\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n   initHeaderAnimation();\r\n});\r\n        \/\/ function lockScroll(duration = 4000) {\r\n        \/\/     const scrollY = window.scrollY;\r\n\r\n        \/\/     document.body.style.position = 'fixed';\r\n        \/\/     document.body.style.top = `-${scrollY}px`;\r\n        \/\/     document.body.style.left = '0';\r\n        \/\/     document.body.style.right = '0';\r\n        \/\/     document.body.style.width = '100%';\r\n        \/\/     document.body.style.overflow = 'hidden';\r\n\r\n        \/\/     setTimeout(() => {\r\n        \/\/         document.body.style.position = '';\r\n        \/\/         document.body.style.top = '';\r\n        \/\/         document.body.style.left = '';\r\n        \/\/         document.body.style.right = '';\r\n        \/\/         document.body.style.width = '';\r\n        \/\/         document.body.style.overflow = '';\r\n\r\n        \/\/         window.scrollTo(0, scrollY);\r\n        \/\/     }, duration);\r\n        \/\/ }\r\n\r\n        \/\/ Always scroll to top on reload\r\n        \/\/ if ('scrollRestoration' in history) {\r\n        \/\/     history.scrollRestoration = 'manual'; \/\/ Disable auto scroll restore\r\n        \/\/ }\r\n\r\n        \/\/ window.addEventListener('beforeunload', () => {\r\n        \/\/     window.scrollTo(0, 0); \/\/ Ensures it's at the top before leaving\r\n        \/\/ });\r\n\r\n        window.addEventListener('load', () => {\r\n            window.scrollTo(0, 0); \/\/ Forces top scroll on load\r\n\r\n\r\n        });\r\n\r\n\r\n        const cards = document.querySelector('.cards');\r\n        const toggleBtn = document.getElementById('spreadToggle');\r\n        const popups = document.querySelectorAll('.popup');\r\n        const cardsElement = document.querySelector('.card');\r\n        const computedStyles = getComputedStyle(cardsElement);\r\n        const cardWidth = parseInt(computedStyles.getPropertyValue('--card-width'));\r\n        const spacing = cardWidth \/ 2;\r\n\r\n        gsap.set(popups, {\r\n            scale: 0,\r\n            opacity: 0,\r\n            transformOrigin: \"center bottom\"\r\n        });\r\n\r\n\r\n\r\n        \/\/ GSAP Timeline for spreading animation\r\n        function createSpreadTimeline() {\r\n            const tl = gsap.timeline();\r\n            const spreadData = [\r\n                { x: -spacing * 3.6, y: 40, rotation: -12 },\r\n                { x: -spacing * 2.4, y: -10, rotation: -6 },\r\n                { x: -spacing * 1.3, y: 10, rotation: -4 },\r\n                { x: 0, y: 10, rotation: 0 },\r\n                { x: spacing * 1.3, y: 10, rotation: 4 },\r\n                { x: spacing * 2.4, y: 20, rotation: 8 },\r\n                { x: spacing * 3.6, y: 10, rotation: 12 }\r\n            ];\r\n\r\n            tl.set('.cards', { opacity: 1 })\r\n                .from('.cards', { y: '50vh', rotate: -15, duration: 1.5 })\r\n                .call(() => {\r\n                    spreadData.forEach((data, index) => {\r\n                        gsap.to(`.card:nth-child(${index + 1})`, {\r\n                            x: data.x,\r\n                            y: data.y,\r\n                            rotation: data.rotation,\r\n                            duration: 1.2,\r\n                            ease: \"cubic-bezier(0.4, 0, 0.2, 1)\"\r\n                        });\r\n                    });\r\n                })\r\n                .to(popups, {\r\n                    scale: 1,\r\n                    opacity: 1,\r\n                    duration: 0.3,\r\n                    ease: \"back.out(1.7)\"\r\n                }, 2.2);\r\n\r\n            return tl;\r\n        }\r\n        \/\/ Initialize GSAP transforms for popups\r\n\r\n\r\n\r\n        \/\/ Auto-start animation after page loads\r\n        window.addEventListener('load', () => {\r\n            \/\/ Add a small delay to ensure everything is fully loaded\r\n            setTimeout(() => {\r\n                createSpreadTimeline().play();\r\n            }, 500); \/\/ 500ms delay after page load\r\n        });\r\n\r\n        document.fonts.ready.then(() => {\r\n            \/\/ Create the main timeline\r\n            const mainTimeline = gsap.timeline({delay:1});\r\n\r\n            \/\/ Set initial states\r\n            gsap.set(\".text-landing\", { opacity: 1 });\r\n            gsap.set(\".heading-split\", { opacity: 1 });\r\n            gsap.set(\".text-showcase\", { opacity: 1 });\r\n            gsap.set(\".heading-split-showcase\", { opacity: 1 });\r\n\r\n            \/\/ Create SplitText for both elements\r\n            const splitTextLanding = SplitText.create(\".text-landing\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n\r\n            const splitHeading = SplitText.create(\".heading-split\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n            const splitTextShowcase = SplitText.create(\".text-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                \/\/ autoSplit: true\r\n            });\r\n\r\n            const splitHeadingShowcase = SplitText.create(\".heading-split-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                \/\/ autoSplit: true\r\n            });\r\n            const splitBadgeShowcase = SplitText.create(\".badge-showcase\", {\r\n                type: \"words,lines\",\r\n                linesClass: \"line\",\r\n                autoSplit: true\r\n            });\r\n\r\n            \/\/ Add animations to timeline\r\n            mainTimeline\r\n                .from(splitHeading.words, {\r\n                    duration: 2,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.2,\r\n                    ease: \"expo.out\"\r\n                }, 0) \/\/ Start immediately\r\n                .from(splitTextLanding.words, {\r\n                    duration: 1.5,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.05,\r\n                    ease: \"expo.out\"\r\n                }, 2.5) \/\/ Start at 3 seconds\r\n                .from('.button-landing-cta', {\r\n                    autoAlpha: 0,\r\n                    y: 40,\r\n                    stagger: 0.2,\r\n                    duration: 1\r\n                }, 3); \/\/ Start at 3.5 seconds\r\n\r\n            \/\/ Showcase section timeline (ScrollTrigger activated)\r\n            const showcaseTimeline = gsap.timeline({\r\n                scrollTrigger: {\r\n                    trigger: \".showcase\", \/\/ or use a wrapper element like \".showcase-section\"\r\n                    start: \"clamp(top center)\",\r\n                     end: \"bottom top\",\r\n                    \/\/end: \"bottom 65%\",\r\n                    toggleActions: \"play none none none\",\r\n                    \/\/ scrub: true,\r\n                    \/\/ markers: true \/\/ uncomment for debugging\r\n                }\r\n            });\r\n\r\n            showcaseTimeline\r\n                .from(splitBadgeShowcase.words, {\r\n                    duration: 1.2,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    ease: \"expo.out\"\r\n\r\n                })\r\n                .from(splitHeadingShowcase.words, {\r\n                    duration: 1.5,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.2,\r\n                    ease: \"expo.out\"\r\n                }, '-=1') \/\/ Start immediately when triggered\r\n                .from(splitTextShowcase.words, {\r\n                    duration: 1.5,\r\n                    filter: 'blur(5px)',\r\n                    yPercent: 100,\r\n                    opacity: 0,\r\n                    stagger: 0.05,\r\n                    ease: \"expo.out\"\r\n                }, 1.5) \/\/ Start 1 seconds after heading\r\n                .from('.button-showcase-cta', {\r\n                    autoAlpha: 0,\r\n                    y:40,\r\n                    stagger: 0.2,\r\n                    duration: 1\r\n                }, \"-=1.3\");\r\n            \/\/ Return both timelines for external control\r\n            return {\r\n                landing: mainTimeline,\r\n                showcase: showcaseTimeline\r\n            };\r\n        });\r\n\r\n\r\n\r\n\r\n        \/\/ Select the two elements\r\n\r\n        const showcase = document.querySelector('.showcase');\r\n\r\n        \/\/ Get the bottom position of the .showcase section\r\n        const showcaseBottom = showcase.offsetTop + showcase.offsetHeight;\r\n\r\n        \/\/ Get the top position of the .cards element\r\n        const cardsTop = cards.getBoundingClientRect().top + window.scrollY;\r\n        const cardsBottom = cards.offsetTop + cards.offsetHeight;\r\n\r\n        \/\/ Calculate the distance\r\n        let distance = showcaseBottom - cardsTop + 100;\r\n        let distanceMobile = showcaseBottom - cardsTop + 280;\r\n\r\n\r\n        \/\/ console.log('Distance between .cards and bottom of .showcase:', distance, 'px');\r\n\r\n        \/\/ 1. Wait a bit for the initial spread to happen\r\n        \/\/ Replace the existing scroll trigger section in your code with this:\r\n\r\n        \/\/ 1. Wait a bit for the initial spread to happen\r\n        setTimeout(() => {\r\n            const cards = document.querySelectorAll('.cards .card');\r\n            \/\/ Calculate spread positions from CSS custom properties\r\n\r\n\r\n            \/\/ const spreadData = [\r\n            \/\/     { x: -spacing * 3.6, y: 40, rotation: -12 },\r\n            \/\/     { x: -spacing * 2.4, y: -10, rotation: -6 },\r\n            \/\/     { x: -spacing * 1.3, y: 10, rotation: -4 },\r\n            \/\/     { x: 0, y: 10, rotation: 0 },\r\n            \/\/     { x: spacing * 1.3, y: 10, rotation: 4 },\r\n            \/\/     { x: spacing * 2.4, y: 20, rotation: 8 },\r\n            \/\/     { x: spacing * 3.6, y: 10, rotation: 12 }\r\n            \/\/ ];\r\n\r\n            \/\/ Remove all CSS classes to avoid conflicts\r\n            \/\/ document.querySelector('.cards').classList.remove('spread', 'stacked');\r\n\r\n\r\n            \/\/ Use fromTo instead of set + to for smoother animation\r\n            \/\/ cards.forEach((card, i) => {\r\n            \/\/     \/\/ Set initial spread position immediately without transition\r\n            \/\/     gsap.set(card, {\r\n            \/\/         x: spreadData[i].x,\r\n            \/\/         y: spreadData[i].y,\r\n            \/\/         rotation: spreadData[i].rotation,\r\n            \/\/         xPercent: -50,\r\n            \/\/         \/\/ Enable hardware acceleration\r\n            \/\/     });\r\n            \/\/ });\r\n            \/\/ remove the popup\r\n            gsap.to(popups, {\r\n                scrollTrigger: {\r\n                    trigger: \".cards\",\r\n                    start: \"bottom center\",\r\n                    \/\/ endTrigger: \".text-showcase\",\r\n                    \/\/ end: \"bottom top\",\r\n                    toggleActions: \"play none none reverse\",\r\n                },\r\n                scale: 0,\r\n                \/\/ opacity: 1,\r\n                duration: 0.3,\r\n                ease: \"back.in(1.7)\"\r\n            });\r\n            \/\/ STEP 1: Animate cards from spread \u2192 stacked (with scrub)\r\n            cards.forEach((card, i) => {\r\n\r\n                gsap.to(card, {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"top 20%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom bottom\",\r\n                        scrub: true,\r\n\r\n\r\n                    },\r\n                    x: 0,\r\n                    y: 0,\r\n                    rotation: 0,\r\n                    ease: \"none\",\r\n                    xPercent: -50\r\n                });\r\n            });\r\n\r\n            \/\/ STEP 2: Animate the whole wrapper down (this completes first)\r\n            gsap.to('.cards', {\r\n                scrollTrigger: {\r\n                    trigger: \".cards\",\r\n                    start: \"top 20%\",\r\n                    endTrigger: \".text-showcase\",\r\n                    end: \"bottom center\", \/\/ This completes at \"bottom top\"\r\n                    scrub: true,\r\n                    \/\/ markers: true,\r\n                    id: '2',\r\n\r\n\r\n                },\r\n                y: distance,\r\n                ease: \"none\",\r\n            });\r\n            \/\/ popup showcase\r\n            gsap.to('.popup-showcase', {\r\n                scrollTrigger: {\r\n                    trigger: \".text-showcase\",\r\n                    start: \"bottom 55%\",\r\n                    endTrigger: \".text-showcase\",\r\n                    end: \"bottom center\",\r\n                    toggleActions: \"play none none reverse\",\r\n                    \/\/ markers:true,\r\n\r\n                },\r\n                scale: 1,\r\n                opacity: 1,\r\n                duration: 0.3,\r\n                rotate: -5,\r\n                delay: .5,\r\n                repeatDelay: .5,\r\n                ease: \"back.out(1.7)\"\r\n            });\r\n            \/\/ STEP 3: Vertical spread trigger - starts AFTER the y:distance is complete\r\n            const verticalSpreadData = [\r\n                { xPercent: -50, yPercent: 0, scale: 1.2 },   \/\/ Card 1 - starting from -50\r\n                { xPercent: 30, yPercent: 18, scale: 1.19 },  \/\/ Card 2 - maintained 80 unit increment\r\n                { xPercent: 110, yPercent: 36, scale: 1.18 }, \/\/ Card 3 - maintained 80 unit increment\r\n                { xPercent: 190, yPercent: 54, scale: 1.17 }, \/\/ Card 4 - maintained 80 unit increment\r\n                { xPercent: 270, yPercent: 72, scale: 1.16 }, \/\/ Card 5 - maintained 80 unit increment\r\n                { xPercent: 350, yPercent: 90, scale: 1.15 }, \/\/ Card 6 - maintained 80 unit increment\r\n                { xPercent: 430, yPercent: 108, scale: 1.14 }, \/\/ Card 7 - maintained 80 unit increment\r\n            ];\r\n\r\n\r\n\r\n\r\n            \/\/ Animate each card's vertical spread with scrub\r\n            cards.forEach((card, i) => {\r\n                gsap.to(card, {\r\n                    scrollTrigger: {\r\n                        trigger: \".text-showcase\",\r\n                        start: \"bottom 60%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\", \/\/ This completes at \"bottom top\"\r\n                        id: 'll',\r\n                        toggleActions: \"play none none reverse\",\r\n                        \/\/ markers: true\r\n                    },\r\n                    xPercent: verticalSpreadData[i].xPercent,\r\n                    yPercent: verticalSpreadData[i].yPercent,\r\n                    scale: verticalSpreadData[i].scale,\r\n                    \/\/ duration:2,\r\n                    ease: \"none\" \/\/ Use \"none\" for scrub animations\r\n                });\r\n            });\r\n\r\n            \/\/ Reset back to stacked positions (after y:distance movement)\r\n            gsap.matchMedia().add(\"(max-width: 768px)\", () => {\r\n\r\n\r\n                ScrollTrigger.getAll().forEach(trigger => {\r\n                    if (trigger.vars.id === '2' || trigger.vars.id === 'll' ||\r\n                        trigger.trigger === document.querySelector('.cards') ||\r\n                        trigger.trigger === document.querySelector('.text-showcase')) {\r\n                        trigger.kill();\r\n                    }\r\n                });\r\n                \/\/ Hide cards 1, 2, 6, 7 (indices 0, 1, 5, 6)\r\n                const cardsToHide = [0, 1, 5, 6];\r\n                cardsToHide.forEach(index => {\r\n                    if (cards[index]) {\r\n                        gsap.set(cards[index], { display: \"none\" });\r\n                    }\r\n                });\r\n\r\n                \/\/ Show only cards 3, 4, 5 (indices 2, 3, 4) and apply vertical spread data\r\n                const visibleCards = [cards[2], cards[3], cards[4]]; \/\/ 3rd, 4th, 5th cards\r\n                const tabletSpreadData = [\r\n                    { xPercent: -50, yPercent: 0, scale: 1.16 }, \/\/ 3rd card (index 2) - repositioned as first\r\n                    { xPercent: 30, yPercent: 18, scale: 1.14 }, \/\/ 4th card (index 3) - repositioned as second\r\n                    { xPercent: 110, yPercent: 36, scale: 1.12 }  \/\/ 5th card (index 4) - repositioned as third\r\n                ];\r\n\r\n                \/\/ Remove popup animations for tablet\r\n                gsap.to(popups, {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"bottom center\",\r\n                        toggleActions: \"play none none reverse\",\r\n                    },\r\n                    scale: 0,\r\n                    duration: 0.3,\r\n                    ease: \"back.in(1.7)\"\r\n                });\r\n\r\n                \/\/ Animate visible cards from spread \u2192 stacked\r\n                visibleCards.forEach((card, i) => {\r\n                    if (card) {\r\n                        gsap.to(card, {\r\n                            scrollTrigger: {\r\n                                trigger: \".cards\",\r\n                                start: \"top 25%\",\r\n                                endTrigger: \".text-showcase\",\r\n                                end: \"bottom bottom\",\r\n                                scrub: true,\r\n                            },\r\n                            x: 0,\r\n                            y: 0,\r\n                            rotation: 0,\r\n                            ease: \"none\",\r\n                            xPercent: -50\r\n                        });\r\n                    }\r\n                });\r\n\r\n                \/\/ Animate the whole wrapper down\r\n                gsap.to('.cards', {\r\n                    scrollTrigger: {\r\n                        trigger: \".cards\",\r\n                        start: \"top 25%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\",\r\n                        scrub: true,\r\n                    },\r\n                    y: distanceMobile,\r\n                    ease: \"none\",\r\n                });\r\n\r\n                \/\/ Popup showcase animation\r\n                gsap.to('.popup-showcase', {\r\n                    scrollTrigger: {\r\n                        trigger: \".text-showcase\",\r\n                        start: \"bottom 55%\",\r\n                        endTrigger: \".text-showcase\",\r\n                        end: \"bottom center\",\r\n                        toggleActions: \"play none none reverse\",\r\n                    },\r\n                    scale: 1,\r\n                    opacity: 1,\r\n                    duration: 0.3,\r\n                    delay: .5,\r\n                    repeatDelay: .5,\r\n                    ease: \"back.out(1.7)\"\r\n                });\r\n\r\n                \/\/ Apply vertical spread to visible cards with tablet-specific data\r\n                visibleCards.forEach((card, i) => {\r\n                    if (card) {\r\n                        gsap.to(card, {\r\n                            scrollTrigger: {\r\n                                trigger: \".text-showcase\",\r\n                                start: \"bottom 60%\",\r\n                                endTrigger: \".text-showcase\",\r\n                                end: \"bottom center\",\r\n                                toggleActions: \"play none none reverse\",\r\n                            },\r\n                            xPercent: tabletSpreadData[i].xPercent,\r\n                            yPercent: tabletSpreadData[i].yPercent,\r\n                            scale: tabletSpreadData[i].scale,\r\n                            ease: \"none\"\r\n                        });\r\n                    }\r\n                });\r\n\r\n            });\r\n        }, 4000);\r\n\r\n        \/\/ GSAP MatchMedia for tablet and below\r\n        \/\/ GSAP matchMedia for tablet and below\r\n\r\n\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u200bFree consultation vision pro \u200bInnovation you can see, hear and feel #Innovation #Technology #Glasses #VR Glasses vision pro \u200bInnovation you can see, hear and feel \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u06cc\u0646 \u0645\u062a\u0646 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f. \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f \u0633\u0627\u062f\u06af\u06cc \u0646\u0627\u0645\u0641\u0647\u0648\u0645 \u0627\u0632 \u0635\u0646\u0639\u062a \u0686\u0627\u067e \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0637\u0631\u0627\u062d\u0627\u0646 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0633\u062a. us to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-716","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=716"}],"version-history":[{"count":86,"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/716\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/716\/revisions\/1579"}],"wp:attachment":[{"href":"https:\/\/slider.brightvisiondesign.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}