{"version":3,"sources":["app.scss"],"names":[],"mappings":"AAAA;EACC,eAAc;EACd,mBAAkB;EAClB,YAAW;EACX,cAAa;EACb,YAAW;EACX,oBAAU;MAAV,eAAU;UAAV,WAAU;EACV,4BAAmB;UAAnB,oBAAmB,EACnB;;AAED;EACC,qBAAoB,EACpB;;AAED;;EAEC,YAAW;EACX,cAAa,EACb;;AAED;;EAEC,UAAS;EACT,YAAW;EACX,aAAY;EACZ,eAAc,EACd;;AAED;EACC,mCAA0B;UAA1B,2BAA0B;EAAE,kCAAkC,EAC9D;;AAED;;;;;;EAMC,oDAAmC;EAAnC,4CAAmC;EAAnC,oCAAmC;EAAnC,qEAAmC,EACnC;;AAED;EACC,mBAAkB,EAClB;;AAED;EACC,YAAW;EACX,mBAAkB;EAClB,WAAU;EACV,YAAW;EACX,QAAO;EACP,SAAQ;EACR,8CAA0C,EAC1C;;AAED;EACC,mBAAkB;EAClB,OAAM;EACN,QAAO;EACP,YAAW;EACX,aAAY;EACZ,iBAAgB,EAChB;;AAED;EACC,0HAAiH;EAAjH,kHAAiH,EACjH;;AAED;EACC,mBAAkB;EAClB,YAAW;EACX,aAAY;EACZ,UAAS;EACT,WAAU;EACV,yHAAgH;EAAhH,iHAAgH,EAChH;;AAED;EACC,WAAU;EACV,aAAY;EACZ,kBAAgB;EAChB,iCAAwB;EAAxB,yBAAwB;EACxB,kCAAyB;EAAzB,0BAAyB;EACzB,yCAAgC;UAAhC,iCAAgC,EAChC;;AAED;EACC,mBAAkB;EAClB,UAAS;EACT,YAAW;EACX,aAAY,EACZ;;AAED;EACC,UAAS;EACT,oBAAmB;EACnB,gBAAe;EACf,eAAc,EACd;;AAED;EACC,kBAAiB;EACjB,kBAAiB;EACjB,uBAAsB,EACtB;;AAED,uBAAuB;AAEvB,yBAAyB;AACzB;EACC,2CAAuC,EACvC;;AAED,wCAAwC;AACxC;;;EAGC,eAAc,EACd;;AAED;EACC,mGAA0F;EAA1F,2FAA0F,EAC1F;;AAED;EACC,gBAAe;EACf,kBAAiB,EACjB;;AAED,8CAA8C;AAC9C;EACC,kGAAwF;EAAxF,0FAAwF,EACxF;;AAED;EACC,aAAY;EACZ,kBAAiB;EACjB,iDAA6C,EAC7C;;AAED,oCAAoC;AACpC;EACC,2GAA4G;EAA5G,mGAA4G,EAC5G;;AAED;EACC;IACC,wCAA6B;YAA7B,gCAA6B;IAC7B,2CAA0B;IAA1B,mCAA0B;IAA1B,2BAA0B;IAA1B,mDAA0B,EAC1B;EACD;IACC,oCAAyB;YAAzB,4BAAyB,EACzB;EACD;;IAEC,2CAAgC;YAAhC,mCAAgC;IAChC,WAAU;IACV,yDAAwC;IAAxC,iDAAwC;IAAxC,yCAAwC;IAAxC,iEAAwC,EACxC;EACD;IACC,+BAAsB;YAAtB,uBAAsB,EACtB;EACD;;IAEC,wCAA6B;YAA7B,gCAA6B;IAC7B,WAAU,EACV,EAAA;;AAGF,gCAAgC;AAChC;EACC,uBAAsB;EACtB,wBAAuB;EACvB,2CAAkC;EAAlC,mCAAkC,EAClC;;AAED;EACC,sBAAqB,EACrB;;AAED;EACC,iBAAgB,EAChB;;AAED,yCAAyC;AACzC;;;EAGC,eAAc,EACd;;AAED;EACC,mGAA0F;EAA1F,2FAA0F,EAC1F;;AAGD;EACC,WAAU;EACV,YAAW,EACX;;AACD;EACC,gBAAe;EACf,kBAAiB;EACjB,YAAW;EACX,aAAY;EACZ,wBAAc;UAAd,gBAAc,EACd;;AAED;EACC,yBAAwB,EACxB;;AAED;EACC,iBAAgB,EAChB;;AAED,gCAAgC;AAChC;EACC,qGAA4F;EAA5F,6FAA4F,EAC5F;;AAED;EACC,WAAU;EACV,wCAA6B;UAA7B,gCAA6B;EAC7B,yDAAwC;EAAxC,iDAAwC;EAAxC,yCAAwC;EAAxC,iEAAwC,EACxC;;AACD;EACC,mBAAkB,EAClB;;AAED;EACC,WAAU;EACV,oCAAyB;UAAzB,4BAAyB,EACzB;;AAED;EACC,iBAAgB,EAChB;;AAED,gCAAgC;AAChC;EACC,0BAAiB;UAAjB,kBAAiB,EACjB;;AAED;EACC,8BAAqB;UAArB,sBAAqB,EACrB;;AAED;EACC,2BAA0B,EAC1B;;AACD;EACC,gBAAe;EACf,kBAAiB,EACjB;;AAED;EACC,eAAc;EACd,2BAA0B,EAC1B;;AAED;EACC,iBAAgB,EAChB","file":"style.css","sourcesContent":[".znTiltBox-tilter {\r\n\tdisplay: block;\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\theight: 415px;\r\n\tcolor: #fff;\r\n\tflex: none;\r\n\tperspective: 1000px;\r\n}\r\n\r\n.znTiltBox-tilter * {\r\n\tpointer-events: none;\r\n}\r\n\r\n.znTiltBox-tilter:hover,\r\n.znTiltBox-tilter:focus {\r\n\tcolor: #fff;\r\n\toutline: none;\r\n}\r\n\r\n.znTiltBox-tilter__figure,\r\n.znTiltBox-tilter__image {\r\n\tmargin: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tdisplay: block;\r\n}\r\n\r\n.znTiltBox-tilter__figure > * {\r\n\ttransform: translateZ(0px); /* Force correct stacking order */\r\n}\r\n\r\n.znTiltBox-tilter__figure,\r\n.znTiltBox-tilter__deco--overlay,\r\n.znTiltBox-tilter__deco--lines,\r\n.znTiltBox-tilter__deco--lines rect,\r\n.znTiltBox-tilter__deco--shine div,\r\n.znTiltBox-tilter__caption {\r\n\ttransition: transform 0.2s ease-out;\r\n}\r\n\r\n.znTiltBox-tilter__figure {\r\n\tposition: relative;\r\n}\r\n\r\n.znTiltBox-tilter__figure::before {\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\twidth: 90%;\r\n\theight: 90%;\r\n\ttop: 5%;\r\n\tleft: 5%;\r\n\tbox-shadow: 0 30px 20px rgba(35,32,39,0.5);\r\n}\r\n\r\n.znTiltBox-tilter__deco {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toverflow: hidden;\r\n}\r\n\r\n.znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));\r\n}\r\n\r\n.znTiltBox-tilter__deco--shine div {\r\n\tposition: absolute;\r\n\twidth: 200%;\r\n\theight: 200%;\r\n\ttop: -50%;\r\n\tleft: -50%;\r\n\tbackground-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);\r\n}\r\n\r\n.znTiltBox-tilter__deco--lines rect {\r\n\tfill: none;\r\n\tstroke: #fff;\r\n\tstroke-width:2px;\r\n\twidth: calc(100% - 50px);\r\n\theight: calc(100% - 50px);\r\n\ttransform: translate(25px, 25px);\r\n}\r\n\r\n.znTiltBox-tilter__caption {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\twidth: 100%;\r\n\tpadding: 4em;\r\n}\r\n\r\n.znTiltBox-tilter__title {\r\n\tmargin: 0;\r\n\tfont-weight: normal;\r\n\tfont-size: 32px;\r\n\tline-height: 1;\r\n}\r\n\r\n.znTiltBox-tilter__description {\r\n\tmargin: 1em 0 0 0;\r\n\tfont-size: 0.85em;\r\n\tletter-spacing: 0.15em;\r\n}\r\n\r\n/* Individual styles */\r\n\r\n/* Example 1 (Default) */\r\n.znTiltBox-tilter--1 .znTiltBox-tilter__figure::before {\r\n\tbox-shadow: 0 30px 20px rgba(0,0,0,0.5);\r\n}\r\n\r\n/* Example 2 (thicker lines, overlay) */\r\n.znTiltBox-tilter--2,\r\n.znTiltBox-tilter--2:hover,\r\n.znTiltBox-tilter--2:focus {\r\n\tcolor: #2e27ad;\r\n}\r\n\r\n.znTiltBox-tilter--2 .znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6));\r\n}\r\n\r\n.znTiltBox-tilter--2 .znTiltBox-tilter__deco--lines rect {\r\n\tstroke: #2e27ad;\r\n\tstroke-width: 4px;\r\n}\r\n\r\n/* Example 3 (no lines, overlay hard-light) */\r\n.znTiltBox-tilter--3 .znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6), rgba(41, 94, 230,0.5));\r\n}\r\n\r\n.znTiltBox-tilter--3 .znTiltBox-tilter__caption {\r\n\tpadding: 2em;\r\n\ttext-align: right;\r\n\ttext-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);\r\n}\r\n\r\n/* Example 4 (caption sliding in) */\r\n.znTiltBox-tilter--4 .znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6));\r\n}\r\n\r\n@media screen and (min-width: 30em) {\r\n\t.znTiltBox-tilter--4 .znTiltBox-tilter__deco--lines {\r\n\t\ttransform: scale3d(0.8,0.8,1);\r\n\t\ttransition: transform 0.4s;\r\n\t}\r\n\t.znTiltBox-tilter--4:hover .znTiltBox-tilter__deco--lines {\r\n\t\ttransform: scale3d(1,1,1);\r\n\t}\r\n\t.znTiltBox-tilter--4 .znTiltBox-tilter__title,\r\n\t.znTiltBox-tilter--4 .znTiltBox-tilter__description {\r\n\t\ttransform: translate3d(0,80px,0);\r\n\t\topacity: 0;\r\n\t\ttransition: transform 0.4s, opacity 0.4s;\r\n\t}\r\n\t.znTiltBox-tilter--4:hover .znTiltBox-tilter__description {\r\n\t\ttransition-delay: 0.1s;\r\n\t}\r\n\t.znTiltBox-tilter--4:hover .znTiltBox-tilter__title,\r\n\t.znTiltBox-tilter--4:hover .znTiltBox-tilter__description {\r\n\t\ttransform: translate3d(0,0,0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n/* Example 5 (line animating) */\r\n.znTiltBox-tilter--5 .znTiltBox-tilter__deco--lines rect {\r\n\tstroke-dasharray: 355%;\r\n\tstroke-dashoffset: 355%;\r\n\ttransition: stroke-dashoffset 0.7s;\r\n}\r\n\r\n.znTiltBox-tilter--5:hover .znTiltBox-tilter__deco--lines rect {\r\n\tstroke-dashoffset: 0%;\r\n}\r\n\r\n.znTiltBox-tilter--5 .znTiltBox-tilter__figure::before {\r\n\tbox-shadow: none;\r\n}\r\n\r\n/* Example 6 (different line position) */\r\n.znTiltBox-tilter--6,\r\n.znTiltBox-tilter--6:hover,\r\n.znTiltBox-tilter--6:focus {\r\n\tcolor: #2e27ad;\r\n}\r\n\r\n.znTiltBox-tilter--6 .znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(45deg, rgba(46, 39, 173, 0.2), rgba(255, 186, 59, 0.58));\r\n}\r\n\r\n\r\n.znTiltBox-tilter--6 .znTiltBox-tilter__deco--lines {\r\n\ttop: -30px;\r\n\tleft: -30px;\r\n}\r\n.znTiltBox-tilter--6 .znTiltBox-tilter__deco--lines rect {\r\n\tstroke: #2e27ad;\r\n\tstroke-width: 6px;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\ttransform:none;\r\n}\r\n\r\n.znTiltBox-tilter--6 .znTiltBox-tilter__caption {\r\n\tpadding: 0 4em 5.5em 1em;\r\n}\r\n\r\n.znTiltBox-tilter--6 .znTiltBox-tilter__figure::before {\r\n\tbox-shadow: none;\r\n}\r\n\r\n/* Example 7 (different line) */\r\n.znTiltBox-tilter--7 .znTiltBox-tilter__deco--overlay {\r\n\tbackground-image: linear-gradient(45deg, rgba(93, 203, 106, 0.48), rgba(59, 239, 255, 0.58));\r\n}\r\n\r\n.znTiltBox-tilter--7 .znTiltBox-tilter__deco--lines {\r\n\topacity: 0;\r\n\ttransform: scale3d(0.9,0.9,1);\r\n\ttransition: transform 0.3s, opacity 0.3s;\r\n}\r\n.znTiltBox-tilter--7 .znTiltBox-tilter__deco--lines rect {\r\n\tstroke-width: 20px;\r\n}\r\n\r\n.znTiltBox-tilter--7:hover .znTiltBox-tilter__deco--lines  {\r\n\topacity: 1;\r\n\ttransform: scale3d(1,1,1);\r\n}\r\n\r\n.znTiltBox-tilter--7 .znTiltBox-tilter__figure::before {\r\n\tbox-shadow: none;\r\n}\r\n\r\n/* Example 8 (different line) */\r\n.znTiltBox-tilter--8 {\r\n\tperspective: none;\r\n}\r\n\r\n.znTiltBox-tilter--8 .znTiltBox-tilter__figure {\r\n\ttransform-style: flat;\r\n}\r\n\r\n.znTiltBox-tilter--8 .znTiltBox-tilter__deco--lines {\r\n\tmix-blend-mode: color-burn;\r\n}\r\n.znTiltBox-tilter--8 .znTiltBox-tilter__deco--lines rect {\r\n\tstroke: #9255ae;\r\n\tstroke-width: 6px;\r\n}\r\n\r\n.znTiltBox-tilter--8 .znTiltBox-tilter__caption {\r\n\tcolor: #9255ae;\r\n\tmix-blend-mode: color-burn;\r\n}\r\n\r\n.znTiltBox-tilter--8 .znTiltBox-tilter__figure::before {\r\n\tbox-shadow: none;\r\n}\r\n"]}