Bricks Title Animations

template.json

{"content":[{"id":"fyecqm","name":"section","parent":0,"children":["qzlujg","zktbjl"],"settings":{"_cssGlobalClasses":["azghyr"]}},{"id":"zktbjl","name":"container","parent":"fyecqm","children":["mqcylv"],"settings":[]},{"id":"mqcylv","name":"div","parent":"zktbjl","children":["lsmava","jrzudn","pnnpsg"],"settings":{"_cssGlobalClasses":["soqrhe","mjjnlw"]},"label":"WPE Title 1"},{"id":"lsmava","name":"text-basic","parent":"mqcylv","children":[],"settings":{"text":"WPE Title 1","tag":"p","_cssGlobalClasses":["xgjnoo"]},"label":"Upper Title"},{"id":"pnnpsg","name":"text-basic","parent":"mqcylv","children":[],"settings":{"text":"Lower Title","tag":"p","_cssGlobalClasses":["xuiylk"]},"label":"Lower Title"},{"id":"jrzudn","name":"divider","parent":"mqcylv","children":[],"settings":{"_cssGlobalClasses":["pefdqc"]}},{"id":"inoygc","name":"text","parent":"qzlujg","children":[],"settings":{"text":"<p>Isn't that fantastic that you can create an almighty tree that fast? Every day I learn. Be so very light. Be a gentle whisper. There are no limits in this world. If you don't like it - change it. It's your world.</p><p>The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. You have freedom here. The only guide is your heart. Now we'll take the almighty fan brush. If you didn't have baby clouds, you wouldn't have big clouds.</p><p>This is probably the greatest thing that's ever happened in my life. You have to make those little noises or it won't work. And that's when it becomes fun - you don't have to spend your time thinking about what's happening - you just let it happen. Maybe there's a happy little waterfall happening over here. Zip. That easy. As trees get older they lose their chlorophyll.</p><p>This is gonna be a happy little seascape. Everybody needs a friend. You're the greatest thing that has ever been or ever will be. You're special. You're so very special. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so. When you do it your way you can go anywhere you choose. Water's like me. It's laaazy ... Boy, it always looks for the easiest way to do things</p><p>Be brave. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself. You have to allow the paint to break to make it beautiful.</p><p>We'll lay all these little funky little things in there. We'll put some happy little leaves here and there. I'm gonna add just a tiny little amount of Prussian Blue. That easy. Here's something that's fun.</p><p>Maybe he has a little friend that lives right over here. Steve wants reflections, so let's give him reflections. We don't make mistakes we just have happy little accidents. You need the dark in order to show the light.</p><p>Isn't that fantastic that you can create an almighty tree that fast? Every day I learn. Be so very light. Be a gentle whisper. There are no limits in this world. If you don't like it - change it. It's your world.</p><p>The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. You have freedom here. The only guide is your heart. Now we'll take the almighty fan brush. If you didn't have baby clouds, you wouldn't have big clouds.</p><p>This is probably the greatest thing that's ever happened in my life. You have to make those little noises or it won't work. And that's when it becomes fun - you don't have to spend your time thinking about what's happening - you just let it happen. Maybe there's a happy little waterfall happening over here. Zip. That easy. As trees get older they lose their chlorophyll.</p><p>This is gonna be a happy little seascape. Everybody needs a friend. You're the greatest thing that has ever been or ever will be. You're special. You're so very special. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so. When you do it your way you can go anywhere you choose. Water's like me. It's laaazy ... Boy, it always looks for the easiest way to do things</p><p>Be brave. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself. You have to allow the paint to break to make it beautiful.</p><p>We'll lay all these little funky little things in there. We'll put some happy little leaves here and there. I'm gonna add just a tiny little amount of Prussian Blue. That easy. Here's something that's fun.</p><p>Maybe he has a little friend that lives right over here. Steve wants reflections, so let's give him reflections. We don't make mistakes we just have happy little accidents. You need the dark in order to show the light.</p><p> </p>"}},{"id":"qzlujg","name":"container","parent":"fyecqm","children":["inoygc"],"settings":[]},{"id":"pgbdni","name":"container","parent":"puajub","children":["gfqvxn"],"settings":[]},{"id":"gfqvxn","name":"div","parent":"pgbdni","children":["zkxdtu","ggybeu","nesasj"],"settings":{"_cssGlobalClasses":["mjjnlw","kwkdit"]},"label":"WPE Title 2"},{"id":"zkxdtu","name":"text-basic","parent":"gfqvxn","children":[],"settings":{"text":"WPE Title 2","tag":"p","_cssGlobalClasses":["crqlpu"]},"label":"Upper Title"},{"id":"ggybeu","name":"divider","parent":"gfqvxn","children":[],"settings":{"_cssGlobalClasses":["gnbbmm"]}},{"id":"nesasj","name":"text-basic","parent":"gfqvxn","children":[],"settings":{"text":"Lower Title","tag":"p","_cssGlobalClasses":["tyypht"]},"label":"Lower Title"},{"id":"puajub","name":"section","parent":0,"children":["pgbdni"],"settings":{}},{"id":"logthh","name":"section","parent":0,"children":["codceo"],"settings":{}},{"id":"codceo","name":"container","parent":"logthh","children":["vxcskd"],"settings":[]},{"id":"vxcskd","name":"div","parent":"codceo","children":["walzpl","rkgnaf","ybrzzk"],"settings":{"_cssGlobalClasses":["mjjnlw","ueiuce"]},"label":"WPE Title 3"},{"id":"walzpl","name":"text-basic","parent":"vxcskd","children":[],"settings":{"text":"WPE Title 3","tag":"p","_cssGlobalClasses":["fmzeve"]},"label":"Upper Title"},{"id":"rkgnaf","name":"divider","parent":"vxcskd","children":[],"settings":{"_cssGlobalClasses":["vhtqfu"]}},{"id":"ybrzzk","name":"text-basic","parent":"vxcskd","children":[],"settings":{"text":"Lower Title","tag":"p","_cssGlobalClasses":["jmsosk"]},"label":"Lower Title"}],"source":"bricksCopiedElements","sourceUrl":"https://tpl.wpeasy.au","version":"1.10.3","globalClasses":[{"id":"azghyr","name":"fw-spacing--auto","settings":[]},{"id":"soqrhe","name":"wpe-title-1","settings":{"_cssCustom":"/*\nSee Interactions to add and remove the attribute\ndata-in-view\n*/\n.wpe-title-1 {\n\t--root-padding-inline: var(--fw-space--m);\n  --root-row-gap: var(--fw-space--xs);\n  --root-animation-duration: 4s;\n  --root-animation-timing-function: ease;\n  \n  --divider-border-top: 1px solid var(--at-primary);\n  --divider-animation-duration: var(--root-animation-duration);\n  \n  --upper-title-color: var(--at-neutral-l-2);\n  --upper-title-font-size: var(--fw-text--s);\n  --upper-title-font-weight: normal;\n  --upper-title-text-transform: uppercase;\n  --upper-title-letter-spacing: 2px; \n  --upper-title-animation-duration: var(--root-animation-duration);\n  \n  \n  --lower-title-color: var(--at-neutral-l-2);\n  --lower-title-font-size: var(--fw-text--l);\n  --lower-title-font-weight: normal;\n  --lower-title-text-transform: uppercase;\n  --lower-title-letter-spacing: 3px; \n  --lower-title-animation-duration: calc(4s + var(--upper-title-animation-duration));\n  \n}\n\n.wpe-title-1 p{\n  margin: 0;\n}\n\n.wpe-title-1{\n\tdisplay: flex;\n  flex-direction: column;\n  row-gap: var(--root-row-gap);\n  align-items: center;\n \n}\n\n.wpe-title-1__upper-title{\n  line-height: 1;\n\t padding-inline: var(--root-padding-inline);\n  color: var( --upper-title-color);\n  font-size: var(--upper-title-font-size);\n  font-weight: var(--upper-title-font-weight);\n  text-transform: var(--upper-title-text-transform);\n  letter-spacing: var(--upper-title-letter-spacing); \n}\n.wpe-title-1__divider{\n  width: 100%;\n}\n.wpe-title-1__divider .line{\n\tborder-top: var(--divider-border-top);\n  \n}\n\n.wpe-title-1__lower-title{\n  line-height: 1;\n\tpadding-inline: var(--root-padding-inline);\n  color: var(--lower-title-color);\n  font-size: var(--lower-title-font-size);\n  font-weight: var(--lower-title-font-weight);\n  text-transform: var(--lower-title-text-transform);\n  letter-spacing: var(--lower-title-letter-spacing); \n\n}\n\n\n/**************\nANIMATIONS\n**************/\n\n.wpe-title-1[data-in-view] .wpe-title-1__upper-title{\n  animation-name: title-1-upper-title;\n  animation-duration: var(--upper-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n@keyframes title-1-upper-title {\n    0% {\n        opacity: 0;\n        scale: 0.6;\n    }\n\n    100% {\n        opacity: 1;\n        scale: 1;\n    }\n}\n\n.wpe-title-1[data-in-view] .wpe-title-1__lower-title{\n  animation-name: title-1-lower-title;\n  animation-duration: var(--lower-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-1-lower-title {\n    0% {\n        opacity: 0;\n        scale: 0.6; \n    }\n\n    100% {\n        opacity: 1;\n        scale: 1;\n    }\n}\n\n.wpe-title-1[data-in-view] .wpe-title-1__divider{\n  animation-name: title-1-divider;\n  animation-duration: var(--divider-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-1-divider { \n    0% {\n        opacity: 0;\n        scale: 0;\n    }\n\n    100% {\n        opacity: 1;\n        scale: 1;\n    }\n}\n\n\n\n\n\n","_interactions":[{"id":"sjlnlk","trigger":"enterView","action":"setAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"},{"id":"ajxrir","trigger":"leaveView","action":"removeAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"}]},"modified":1727515739,"user_id":1},{"id":"mjjnlw","name":"wpe-custom-animations","settings":{"_cssCustom":"/* Available globally */\n:root {\n    --wpe-transition-distance: 30px;\n\n    /* use as globals if you wish to \n     e.g. var(--wpe-animation-duration--fast);\n    */\n\n    --wpe-animation-duration--fast: 0.2s;\n    --wpe-animation-duration--medium: 0.6s;\n    --wpe-animation-duration--slow: 1s;\n    --wpe-animation-duration--very-slow: 2s;\n    --wpe-animation-timing-function--default: ease-in-out;\n\n}\n\n/* Available to CSS Class */\n.wpe-custom-animations {\n    /* \n    Vars for staggering \n    Do not set Duration, Delay & Timing Function in Bricks UI when using Stagger\n    To set defaults for the following, set the style attribute at ID or unique class level. \n    Set: --wpe-stagger-step-base, --wpe-animation-delay-base, --wpe-animation-duration-base, --wpe-animation-timing-function-base\n    */\n    --wpe-stagger-step: var(--wpe-stagger-step-base, 0.2s);\n    --wpe-animation-delay: var(--wpe-animation-delay-base, 0s);\n    --wpe-animation-duration: var(--wpe-animation-duration-base, 0.6s);\n    --wpe-animation-timing-function: var(--wpe-animation-timing-function-base, ease);\n}\n\n/*###################################\n  Bricks Animations Overrides\n  ####################################*/\n/* Form Left */\n.wpe-custom-animations .brx-animate-fadeInLeft,\n.wpe-custom-animations.brx-animate-fadeInLeft {\n    animation-name: wpe-fadeInLeft;\n}\n\n@keyframes wpe-fadeInLeft {\n    0% {\n        opacity: 0;\n        transform: translateX(calc(-1 * var(--wpe-transition-distance)));\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n/* form right */\n.wpe-custom-animations .brx-animate-fadeInRight,\n.wpe-custom-animations.brx-animate-fadeInRight {\n    animation-name: wpe-fadeInRight;\n}\n\n@keyframes wpe-fadeInRight {\n    0% {\n        opacity: 0;\n        transform: translateX(var(--wpe-transition-distance));\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n/* Form top */\n.wpe-custom-animations .brx-animate-fadeInDown,\n.wpe-custom-animations.brx-animate-fadeInDown {\n    animation-name: wpe-fadeInDown;\n}\n\n@keyframes wpe-fadeInDown {\n    0% {\n        opacity: 0;\n        transform: translateY(calc(-1 * var(--wpe-transition-distance)));\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n/* form bottom */\n.wpe-custom-animations .brx-animate-fadeInUp,\n.wpe-custom-animations.brx-animate-fadeInUp {\n    animation-name: wpe-fadeInUp;\n}\n\n@keyframes wpe-fadeInUp {\n    0% {\n        opacity: 0;\n        transform: translateY(var(--wpe-transition-distance));\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n\n\n/*###################################\n  MODIFIERS\n  ####################################*/\n/* stagger Delay */\n\n.wpe-custom-animations--stagger-delay>* {\n    animation-delay: var(--wpe-animation-delay-x) !important;\n    animation-timing-function: var(--wpe-animation-timing-function) !important;\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(1) {\n    --wpe-animation-delay-x: var(--wpe-animation-delay);\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(2) {\n    --wpe-animation-delay-x: calc(var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(3) {\n    --wpe-animation-delay-x: calc(2 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(4) {\n    --wpe-animation-delay-x: calc(3 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(5) {\n    --wpe-animation-delay-x: calc(4 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(6) {\n    --wpe-animation-delay-x: calc(5 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(7) {\n    --wpe-animation-delay-x: calc(6 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(8) {\n    --wpe-animation-delay-x: calc(7 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(9) {\n    --wpe-animation-delay-x: calc(8 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n.wpe-custom-animations--stagger-delay>*:nth-of-type(10) {\n    --wpe-animation-delay-x: calc(9 * var(--wpe-stagger-step) + var(--wpe-animation-delay));\n}\n\n/* stagger Duration */\n\n.wpe-custom-animations--stagger-duration>* {\n    animation-duration: var(--wpe-animation-duration-x) !important;\n    animation-timing-function: var(--wpe-animation-timing-function) !important;\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(1) {\n    --wpe-animation-duration-x: var(--wpe-animation-duration);\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(2) {\n    --wpe-animation-duration-x: calc(var(--wpe-animation-duration) + var(--wpe-stagger-step));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(3) {\n    --wpe-animation-duration-x: calc(2 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(4) {\n    --wpe-animation-duration-x: calc(3 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(5) {\n    --wpe-animation-duration-x: calc(4 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(6) {\n    --wpe-animation-duration-x: calc(5 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(7) {\n    --wpe-animation-duration-x: calc(6 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(8) {\n    --wpe-animation-duration-x: calc(7 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(9) {\n    --wpe-animation-duration-x: calc(8 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n.wpe-custom-animations--stagger-duration>*:nth-of-type(10) {\n    --wpe-animation-duration-x: calc(9 * var(--wpe-stagger-step) + var(--wpe-animation-duration));\n}\n\n"},"modified":1722684893,"user_id":1},{"id":"xgjnoo","name":"wpe-title-1__upper-title","settings":[]},{"id":"xuiylk","name":"wpe-title-1__lower-title","settings":[]},{"id":"pefdqc","name":"wpe-title-1__divider","settings":[]},{"id":"kwkdit","name":"wpe-title-2","settings":{"_cssCustom":"/*\nSee Interactions to add and remove the attribute\ndata-in-view\n*/\n/*********\nSETTINGS\n*********/\n.wpe-title-2 {\n\t--root-padding-inline: var(--fw-space--m);\n  --root-row-gap: var(--fw-space--xs);\n  --root-animation-duration: 1s;\n  --root-animation-timing-function: cubic-bezier(0.01, 0.34, 0.82, 0.37);\n  --root-transform: skewy(-10deg);\n  \n  --divider-border-top: 1px solid var(--at-primary);\n  --divider-animation-duration: var(--root-animation-duration);\n  \n  --upper-title-color: var(--at-white);\n  --upper-title-font-size: var(--fw-text--s);\n  --upper-title-font-weight: normal;\n  --upper-title-text-transform: uppercase;\n  --upper-title-letter-spacing: 2px; \n  --upper-title-animation-duration: var(--root-animation-duration);\n  --upper-title-background: var(--at-neutral);\n  --upper-tile-padding: 0.3em;\n  --upper-tile-border-radius: var(--fw-radius--s);\n  \n  --lower-title-color: var(--at-neutral-l-4);\n  --lower-title-font-size: var(--fw-text--l);\n  --lower-title-font-weight: normal;\n  --lower-title-text-transform: uppercase;\n  --lower-title-letter-spacing: 3px; \n  --lower-title-animation-duration: calc(1s + var(--upper-title-animation-duration));\n  --lower-title-background: var(--at-neutral);\n  --lower-tile-padding: 0.3em;\n  --lower-tile-border-radius: var(--fw-radius--s);\n  \n}\n\n/*********\nAPPLICATION\n*********/\n.wpe-title-2 p{\n  margin: 0;\n}\n\n.wpe-title-2{\n\tdisplay: flex;\n  flex-direction: column;\n  row-gap: var(--root-row-gap);\n  align-items: center;\n  transform: var(--root-transform);\n}\n\n.wpe-title-2__upper-title{\n  line-height: 1;\n\tpadding: var(--upper-tile-padding);\n  color: var( --upper-title-color);\n  background: var(--upper-title-background);\n  border-radius: var(--upper-tile-border-radius);\n  font-size: var(--upper-title-font-size);\n  font-weight: var(--upper-title-font-weight);\n  text-transform: var(--upper-title-text-transform);\n  letter-spacing: var(--upper-title-letter-spacing); \n}\n.wpe-title-2__divider{\n  width: 100%;\n}\n.wpe-title-2__divider .line{\n\tborder-top: var(--divider-border-top);\n  \n}\n\n.wpe-title-2__lower-title{\n  line-height: 1;\n\tpadding: var(--lower-tile-padding);\n  color: var(--lower-title-color);\n  background: var(--lower-title-background);\n  border-radius: var(--lower-tile-border-radius);\n  font-size: var(--lower-title-font-size);\n  font-weight: var(--lower-title-font-weight);\n  text-transform: var(--lower-title-text-transform);\n  letter-spacing: var(--lower-title-letter-spacing); \n\n}\n\n\n/**************\nANIMATIONS\n**************/\n\n.wpe-title-2[data-in-view] .wpe-title-2__upper-title{\n  animation-name: title-2-upper-title;\n  animation-duration: var(--upper-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n@keyframes title-2-upper-title {\n    0% {\n        opacity: 0;\n        transform: translateX(60px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n.wpe-title-2[data-in-view] .wpe-title-2__lower-title{\n  animation-name: title-2-lower-title;\n  animation-duration: var(--lower-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-2-lower-title {\n    0% {\n        opacity: 0;\n        transform: translateX(-60px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n.wpe-title-2[data-in-view] .wpe-title-2__divider{\n  animation-name: title-2-divider;\n  animation-duration: var(--divider-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-2-divider { \n    0% {\n        opacity: 0;\n        scale: 0;\n    }\n\n    100% {\n        opacity: 1;\n        scale: 1;\n    }\n}\n\n\n\n\n\n","_interactions":[{"id":"sjlnlk","trigger":"enterView","action":"setAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"},{"id":"ajxrir","trigger":"leaveView","action":"removeAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"}]},"modified":1727515739,"user_id":1},{"id":"crqlpu","name":"wpe-title-2__upper-title","settings":{}},{"id":"gnbbmm","name":"wpe-title-2__divider","settings":{}},{"id":"tyypht","name":"wpe-title-2__lower-title","settings":[]},{"id":"ueiuce","name":"wpe-title-3","settings":{"_cssCustom":"/*\nSee Interactions to add and remove the attribute\ndata-in-view\n*/\n/*********\nSETTINGS\n*********/\n.wpe-title-3 {\n\t--root-padding-inline: var(--fw-space--m);\n  --root-row-gap: var(--fw-space--xs);\n  --root-animation-duration: 1s; \n  --root-animation-timing-function: cubic-bezier(0.01, 0.34, 0.82, 0.37);\n  --root-perspective: 100px;\n  \n  \n  --divider-border-top: 1px solid var(--at-primary);\n  --divider-animation-duration: var(--root-animation-duration);\n  \n  --upper-title-color: var(--at-white);\n  --upper-title-font-size: var(--fw-text--s);\n  --upper-title-font-weight: normal;\n  --upper-title-text-transform: uppercase;\n  --upper-title-letter-spacing: 2px; \n  --upper-title-animation-duration: var(--root-animation-duration);\n  --upper-title-background: var(--at-neutral);\n  --upper-tile-padding: 0.3em;\n  --upper-tile-border-radius: var(--fw-radius--s);\n  \n  --lower-title-color: var(--at-neutral-l-4);\n  --lower-title-font-size: var(--fw-text--l);\n  --lower-title-font-weight: normal;\n  --lower-title-text-transform: uppercase;\n  --lower-title-letter-spacing: 3px; \n  --lower-title-animation-duration: calc(0.5s + var(--upper-title-animation-duration));\n  --lower-title-background: var(--at-neutral);\n  --lower-tile-padding: 0.3em;\n  --lower-tile-border-radius: var(--fw-radius--s);\n  \n}\n\n/*********\nAPPLICATION\n*********/\n.wpe-title-3 p{\n  margin: 0;\n}\n\n.wpe-title-3{\n\tdisplay: flex;\n  flex-direction: column;\n  row-gap: var(--root-row-gap);\n  align-items: center;\n  perspective: var(--root-perspective);\n}\n\n.wpe-title-3__upper-title{\n  line-height: 1;\n\tpadding: var(--upper-tile-padding);\n  color: var( --upper-title-color);\n  background: var(--upper-title-background);\n  border-radius: var(--upper-tile-border-radius);\n  font-size: var(--upper-title-font-size);\n  font-weight: var(--upper-title-font-weight);\n  text-transform: var(--upper-title-text-transform);\n  letter-spacing: var(--upper-title-letter-spacing); \n}\n.wpe-title-3__divider{\n  width: 100%;\n}\n.wpe-title-3__divider .line{\n\tborder-top: var(--divider-border-top);\n  \n}\n\n.wpe-title-3__lower-title{\n  line-height: 1;\n\tpadding: var(--lower-tile-padding);\n  color: var(--lower-title-color);\n  background: var(--lower-title-background);\n  border-radius: var(--lower-tile-border-radius);\n  font-size: var(--lower-title-font-size);\n  font-weight: var(--lower-title-font-weight);\n  text-transform: var(--lower-title-text-transform);\n  letter-spacing: var(--lower-title-letter-spacing); \n\n}\n\n\n/**************\nANIMATIONS\n**************/\n\n.wpe-title-3[data-in-view] .wpe-title-3__upper-title{\n  animation-name: title-3-upper-title;\n  animation-duration: var(--upper-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n@keyframes title-3-upper-title {\n    0% {\n        opacity: 0;\n        transform: rotate3d(1, 1, 1, 45deg); \n    }\n  20%{\n    opacity: 1;\n  }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n.wpe-title-3[data-in-view] .wpe-title-3__lower-title{\n  animation-name: title-3-lower-title;\n  animation-duration: var(--lower-title-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-3-lower-title {\n    0% {\n        opacity: 0;\n        transform: rotate3d(1, 1, 1, 60deg);\n    }\n  20%{\n    opacity: 1;\n  }\n\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n.wpe-title-3[data-in-view] .wpe-title-3__divider{\n  animation-name: title-3-divider;\n  animation-duration: var(--divider-animation-duration);\n  animation-timing-function: var(--root-animation-timing-function);\n}\n\n@keyframes title-3-divider { \n    0% {\n        opacity: 0;\n        scale: 0;\n    }\n  30%{\n    opacity: 1;\n  }\n\n    100% {\n        opacity: 1;\n        scale: 1;\n    }\n}\n\n\n\n\n\n","_interactions":[{"id":"sjlnlk","trigger":"enterView","action":"setAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"},{"id":"ajxrir","trigger":"leaveView","action":"removeAttribute","animationType":"zoomIn","animationDuration":"30s","actionAttributeKey":"data-in-view"}]},"modified":1727515739,"user_id":1},{"id":"fmzeve","name":"wpe-title-3__upper-title","settings":{}},{"id":"vhtqfu","name":"wpe-title-3__divider","settings":{}},{"id":"jmsosk","name":"wpe-title-3__lower-title","settings":[]}],"globalElements":[]}