{"version":3,"file":"editor-style.css","mappings":"AAAA,MACI,uCAKI,0GACI,kBACA,gBACA,YACA,eACA,gBAEA,kHACI,WACA,kBACA,QACA,YACA,qBACA,MAIR,2GACI,gBACA,4BACA,yDAGJ,kHACI,gEAIR,qDACI,GACI,QACA,OACA,wBAEJ,GACI,WACA,OACA,wBAEJ,IACI,WACA,OACA,WAEJ,IACI,QACA,QACA,UAEJ,KACI,QACA,QACA,WAIR,8CACI,GACI,4BAEJ,IACI,4BAEJ,IACI,wBAEJ,KACI,yBAIR,0DACI,gBACA,iBACA,qEACI,qBACA,4BACA,UACA,4BACA,sBACA,sDACA,yDACA,mCACA,wBAIR,wBACI,GACI,UACA,4BAEJ,IACI,UACA,0BAEJ,IACI,UACA,wBAEJ,KACI,UACA,yBAIR,0DACI,gBACA,iBACA,qEACI,qBACA,4BACA,UACA,4BACA,sBACA,sDACA,yDACA,mCACA,wBAIR,wBACI,GACI,UACA,2BAEJ,IACI,UACA,2BAEJ,IACI,UACA,wBAEJ,KACI,UACA,yBAIR,wDACI,gBACA,iBAEA,mEACI,qBACA,mBACA,sBACA,mCACA,wCAEA,kFACI,8BAGJ,mFACI,+BAKZ,0BACI,GACI,0BAEJ,IACI,mCACA,4BAEJ,IACI,0BACA,oBAEJ,KACI,2BAIR,2BACI,GACI,0BAEJ,IACI,mCACA,4BAEJ,KACI,2BAIR,4DACI,gBACA,iBAGJ,oEACI,wDAGJ,kCACI,IACI,WAIR,2DACI,gBACA,gBACA,iBACA,mBACA,kBACA,kBAEA,mEACI,WACA,kBACA,UACA,YACA,MACA,OACA,qBACA,6CACI,CAGR,kEACI,WACA,kBACA,UACA,YACA,MACA,OACA,qBACA,UACA,wDAGJ,6DACI,kBACA,kBACA,SACA,8EAIR,iCACI,GACI,OACA,UAEJ,MACI,UACA,UAEJ,MACI,UACA,UAEJ,KACI,OACA,WAGR,mCACI,GACI,UAEJ,KACI,WAIR,+BACI,GACI,UAEJ,IACI,UAEJ,IACI,UAEJ,KACI,WAIR,iCACI,GACI,4CAEJ,KACI,4CAEJ,MACI,kDAEJ,KACI,mDAKJ,4DACI,gBACA,gBACA,mBACA,kBACA,kBACA,mBACA,UACA,sDAEA,uIAEI,WACA,kBACA,YACA,UACA,MACA,qBACA,sBACA,mDAGJ,oEACI,OACA,uBAGJ,mEACI,QACA,0BAKR,+BACI,GACI,mBACA,UAEJ,IACI,mBACA,UAEJ,KACI,mBACA,WAIR,4BACI,GACI,sBAEJ,IACI,sBAEJ,IACI,sBAEJ,KACI,uBAKZ,8DACI,aACA,gBACA,mBACA,gBACA,gBACA,iBACA,mBAGI,2EACI,qBACA,8DACA,oFAKZ,mCACI,GACI,8DAEJ,IACI,2BAEJ,KACI,yBAIR,kEACI,gBACA,gBACA,iBACA,mBAEA,iGACI,kBACA,YACA,kBACA,yDAIA,yGACI,6FAEA,iHACI,WACA,kBACA,UACA,MACA,wDACA,+HACI,CAIR,gHACI,WACA,kBACA,WACA,SACA,OACA,wDACA,+KACI,CAOpB,qCACI,GACI,SACA,OAEJ,IACI,YACA,MACA,OACA,YAEJ,KACI,SACA,OACA,SACA,UAIR,qCACI,GACI,QAEJ,IACI,WACA,OACA,WAEJ,KACI,SACA,UACA,SAIR,qCACI,GACI,SACA,QACA,UAEJ,IACI,YACA,QACA,UACA,MACA,YAEJ,KACI,SACA,QACA,UACA,MACA,aAIR,qCACI,GACI,QACA,MACA,YAEJ,IACI,WACA,MACA,YACA,OACA,WAEJ,KACI,SACA,MACA,OACA,YAIR,wCACI,GACI,mBAIR,qEACI,uGACA,mGACA,mGACA,sGACA,iIACA,uGACA,mJACA,oJACA,4LACA,mKAGJ,qEACI,mKACA,sLACA,kIACA,gIACA,iIACA,mKACA,sOACA,kLACA,yLACA,iKAGJ,qEACI,mGACA,mGACA,mGACA,gIACA,iIACA,mGACA,mJACA,mJACA,8KACA,iKAGJ,qEACI,mKACA,sLACA,mIACA,gIACA,iIACA,mKACA,uOACA,mLACA,0LACA,iKAGJ,kEACI,eACA,gBACA,iBACA,mBAEA,8FACI,kBACA,kBAEJ,iGACI,YAKI,2NAEI,WACA,kBACA,MACA,OACA,WACA,YAGJ,8GACI,mDACA,yCAGJ,6GACI,mDACA,yCAKJ,2NAEI,qBAMhB,mCACI,4CACA,8CACA,8CACA,8CACA,iDAGJ,mCACI,4CACA,8CACA,8CACA,8CACA,iDAGJ,6DACI,gBACA,gBACA,iBACA,mBAEA,oFACI,kBACA,kBAGJ,uFACI,UACA,kBACA,gBAKI,oGACI,WACA,kBACA,WACA,WACA,SACA,qBACA,4CAIR,+FACI,kDAKZ,iCACI,GACI,SAEJ,IACI,qBAEJ,IACI,QAEJ,IACI,qBAEJ,IACI,QAEJ,KACI,sBAIR,oCACI,cAGJ,6DACI,gBACA,gBACA,iBACA,mBACA,aAEA,kEACI,qBACA,kBACA,uDACA,wBAIA,0EACI,sCACA,wDAMR,uFACI,gBACA,gBACA,iBACA,mBACA,kBACA,8FACA,CAIA,+FACI,oDAKZ,kCACI,GACI,uGACI,CAER,IACI,oGACI,CAER,IACI,sGACI,CAER,IACI,oGACI,CAER,KACI,qGACI,EAKR,sGACI,kBACA,kBACA,gBAEA,6GACI,WACA,kBACA,WACA,WACA,OACA,QACA,eACA,uBAIR,yGACI,eACA,gBACA,iBACA,mBACA,kBACA,kBACA,UAKI,qHACI,qFAMhB,oCACI,GACI,0BAIR,4DACI,gBACA,gBACA,iBACA,mBAEA,iEACI,qBACA,UACA,mBAIA,yEACI,gEAKZ,0BACI,GACI,mBACA,iBACA,UAEJ,IACI,qBACA,UAEJ,KACI,mBACA,eACA,WAIR,mEACI,eACA,gBACA,iBACA,mBACA,gGACI,kBACA,kBACA,gBAEA,+MAEI,WACA,kBACA,WACA,WACA,qBAGJ,wGACI,MACA,OACA,4BAGJ,uGACI,SACA,QACA,2BAMA,+NAEI,6DAIR,2GACI,6DAKZ,4EACI,4BAGJ,iCACI,GACI,yBAIR,sEACI,eACA,gBACA,iBACA,mBAEA,yGACI,kBACA,kBAEA,iOAEI,WACA,kBACA,SACA,SACA,qBACA,yCACA,yBAGJ,iHACI,mBACA,WAGJ,gHACI,mBACA,WAMA,iPAEI,gEAMhB,oCACI,GACI,0CAIR,sEACI,eACA,gBACA,iBACA,mBAEA,yGACI,kBACA,kBAEA,iOAEI,WACA,kBACA,SACA,qBACA,uBAGJ,iHACI,WACA,WACA,OACA,oCAGJ,gHACI,mBACA,WACA,QACA,0BACA,UAMA,yHACI,sEAGJ,wHACI,uEAMhB,0CACI,GACI,qCAIR,2CACI,GACI,UACA,QACA,UAEJ,IACI,OAEJ,IACI,UAEJ,KACI,UACA,QAIR,sEACI,eACA,gBACA,iBACA,mBAIQ,yHACI,sEAGJ,wHACI,iEAMhB,+EACI,kBACA,kBAEA,6KAEI,WACA,kBACA,SACA,SACA,qBAGJ,uFACI,mBACA,WACA,yCAGJ,sFACI,WACA,YACA,kBACA,+BACA,UAIR,0CACI,GACI,0CAIR,yCACI,GACI,WAOI,yHACI,kEAGJ,wHACI,+DAMhB,+EACI,kBACA,kBACA,oBACA,eACA,gBACA,iBACA,mBAEA,6KAEI,WACA,kBACA,SACA,SACA,qBAGJ,uFACI,WACA,WACA,yCACA,uBAGJ,sFACI,WACA,YACA,UACA,kBACA,0BACA,UAIR,0CACI,GACI,0CAIR,yCACI,aACA,WACA,eACA,cACA,eACA,yBAMQ,sHACI,sEAEJ,qHACI,uEAKJ,yHACI,kEAMhB,4EACI,eACA,gBACA,iBACA,mBACA,kBACA,kBAEA,uKAEI,WACA,kBACA,mBACA,WACA,SACA,qBACA,UAGJ,oFACI,SACA,+BAGJ,mFACI,UACA,8BAIR,+EACI,kBACA,kBAEA,uFACI,WACA,kBACA,WACA,WACA,SACA,SACA,qBACA,yCAIR,0CACI,GACI,0CAIR,0CACI,GACI,UAEJ,IACI,OAEJ,IACI,UAEJ,KACI,UACA,OACA,6BAIR,2CACI,GACI,UAEJ,IACI,QAEJ,IACI,WAEJ,KACI,UACA,QACA,6BAIR,sEACI,eACA,gBACA,iBACA,mBAIQ,sHACI,sEAGJ,qHACI,uEAKJ,yHACI,kEAMhB,4EACI,kBACA,kBAEA,uKAEI,WACA,kBACA,SACA,WACA,YACA,qBACA,kBACA,UAGJ,mFACI,SACA,+BAGJ,mFACI,UACA,8BAIR,+EACI,kBACA,kBACA,oBAEA,uFACI,WACA,kBACA,WACA,WACA,SACA,SACA,yCACA,qBAIR,0CACI,aACA,WACA,eACA,cACA,eACA,yBAGJ,2CACI,aACA,YACA,gBACA,eACA,gBACA,0BAGJ,0CACI,GACI,UAEJ,KACI,UACA,0CAOI,yHACI,sEAGJ,wHACI,wEAMhB,4EACI,kBAGJ,+EACI,kBACA,kBACA,eACA,gBACA,iBACA,mBAEA,6KAEI,WACA,kBACA,SACA,SACA,qBAGJ,uFACI,mBACA,WACA,yCAGJ,sFACI,WACA,YACA,6CACA,UAIR,0CACI,GACI,0CAIR,4CACI,GACI,WAOI,sHACI,sEAGJ,qHACI,uEAKJ,yHACI,sEAMhB,4EACI,kBACA,kBAEA,uKAEI,WACA,kBACA,SACA,WACA,YACA,qBACA,UAGJ,mFACI,SACA,6CAGJ,mFACI,UACA,6CAIR,+EACI,kBACA,oBACA,eACA,gBACA,iBACA,mBAEA,uFACI,WACA,kBACA,WACA,WACA,SACA,SACA,yCACA,qBAIR,0CACI,0DACA,yDACA,6DACA,4DACA,6DACA,uEAGJ,2CACI,0DACA,0DACA,8DACA,6DACA,8DACA,wEAGJ,0CACI,GACI,UAEJ,KACI,UACA,0C","sources":["webpack://tantive-text-effects/./src/css/editor-style.scss"],"sourcesContent":[":root {\r\n    --tte-borderRoundTrailBorderColor: red;\r\n}\r\n\r\n.block-editor-block-preview__content-iframe {\r\n    .animSquareSlideInFromLeft {\r\n        .animSquareSlideInFromLeft__Square {\r\n            position: relative;\r\n            overflow: hidden;\r\n            margin: 50px;\r\n            padding-left: 0;\r\n            padding-right: 0;\r\n            \r\n            &::before {\r\n                content: \"\";\r\n                position: absolute;\r\n                width: 0;\r\n                height: 100%;\r\n                background-color: red;\r\n                top: 0;\r\n            }\r\n        }\r\n\r\n        .animSquareSlideInFromLeft__content {\r\n            font-size: 100px;\r\n            transform: translateX(-100%);\r\n            animation: animSquareSlideInFromLeft__content 5s infinite;\r\n        }\r\n            \r\n        .animSquareSlideInFromLeft__Square::before {\r\n            animation: animSquareSlideInFromLeft__square--before 5s infinite;\r\n        }\r\n    }\r\n\r\n    @keyframes animSquareSlideInFromLeft__square--before {\r\n        0% {\r\n            width: 0;\r\n            left: 0;\r\n            transform: translateX(0);\r\n        }\r\n        6% {\r\n            width: 100%;\r\n            left: 0;\r\n            transform: translateX(0);\r\n        }\r\n        16% {\r\n            width: 100%;\r\n            left: 0;\r\n            right: 100%;\r\n        }\r\n        20% {\r\n            width: 0;\r\n            right: 0;\r\n            left: 100%;\r\n        }\r\n        100% {\r\n            width: 0;\r\n            right: 0;\r\n            left:100%;\r\n        }\r\n    }\r\n\r\n    @keyframes animSquareSlideInFromLeft__content {\r\n        0% {\r\n            transform: translateX(-100%);\r\n        }\r\n        16% {\r\n            transform: translateX(-100%);\r\n        }\r\n        30% {\r\n            transform: translateX(0);\r\n        }\r\n        100% {\r\n            transform: translateX(0);\r\n        }\r\n    }\r\n\r\n    .animWavyDrop {\r\n        font-size: 100px;\r\n        margin-left: 50px;\r\n        .tteLetter {\r\n            display: inline-block;\r\n            transform: translateY(-100%);\r\n            opacity: 0;\r\n            animation-name: animWavyDrop;\r\n            animation-duration: 5s;\r\n            animation-delay: calc(0.1s * var(--animWavyDropDuration));\r\n            animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n            animation-iteration-count: infinite;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n    \r\n    @keyframes animWavyDrop {\r\n        0% {\r\n            opacity: 0;\r\n            transform: translateY(-100%);\r\n        }\r\n        10% {\r\n            opacity: 1;\r\n            transform: translateY(30%);\r\n        }\r\n        20% {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    .animWavyRise {\r\n        font-size: 100px;\r\n        margin-left: 50px;\r\n        .tteLetter {\r\n            display: inline-block;\r\n            transform: translateY(-100%);\r\n            opacity: 0;\r\n            animation-name: animWavyRise;\r\n            animation-duration: 5s;\r\n            animation-delay: calc(0.1s * var(--animWavyRiseDuration));\r\n            animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n            animation-iteration-count: infinite;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n  \r\n    @keyframes animWavyRise {\r\n        0% {\r\n            opacity: 0;\r\n            transform: translateY(100%);\r\n        }\r\n        10% {\r\n            opacity: 1;\r\n            transform: translateY(-30%);\r\n        }\r\n        20% {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    .animPopOut {\r\n        font-size: 100px;\r\n        margin-left: 50px;\r\n\t\r\n        .tteLetter {\r\n            display: inline-block;\r\n            margin-right: 0.25em;\r\n            animation-duration: 2s;\r\n            animation-iteration-count: infinite;\r\n            animation-timing-function: steps(1, end);\r\n\r\n            &:nth-child(odd) {\r\n                animation-name: animPopOut-odd;\r\n            }\r\n\r\n            &:nth-child(even) {\r\n                animation-name: animPopOut-even;\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animPopOut-odd {\r\n        0% {\r\n            transform: translate(0, 0);\r\n        }\r\n        25% {\r\n            transform: translate(0.1em, -0.1em);\r\n            text-shadow: -0.1em 0.1em red;\r\n        }\r\n        75% {\r\n            transform: translate(0, 0);\r\n            text-shadow: 0 0  red;\r\n        }\r\n        100% {\r\n            transform: translate(0, 0);\r\n        }\r\n    }\r\n\r\n    @keyframes animPopOut-even {\r\n        0% {\r\n            transform: translate(0, 0);\r\n        }\r\n        50% {\r\n            transform: translate(0.1em, -0.1em);\r\n            text-shadow: -0.1em 0.1em red;\r\n        }\r\n        100% {\r\n            transform: translate(0, 0);\r\n        }\r\n    }\r\n\r\n    .animTypeWriter {\r\n        font-size: 100px;\r\n        margin-left: 50px;\r\n    }\r\n\r\n    .animTypeWriter--cursor {\r\n        animation: animTypeWriter--cursor 1s step-start infinite;\r\n    }\r\n    \r\n    @keyframes animTypeWriter--cursor {\r\n        50% {\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    .animLineSwipe {\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        position: relative;\r\n        width: fit-content;\r\n        \r\n        &::before {\r\n            content:\"\";\r\n            position: absolute;\r\n            width: 4px;\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            background-color: red;\r\n            animation:\r\n                animLineSwipeBarSwipe 4.1s infinite;\r\n        }\r\n        \r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            width: 4px;\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            background-color: red;\r\n            opacity: 0;\r\n            animation: animLineSwipeBorder 4.1s ease-in-out infinite;\r\n        }\r\n        \r\n        p {\r\n            position: relative;\r\n            width: fit-content;\r\n            margin: 0;\r\n            animation: animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite;\r\n        }\r\n    }\r\n\r\n    @keyframes animLineSwipeBarSwipe {\r\n        0% {\r\n            left: 0;\r\n            opacity: 1;\r\n        }\r\n        24.4% {\r\n            left: 100%;\r\n            opacity: 1;\r\n        }\r\n        26.8% {\r\n            left: 100%;\r\n            opacity: 0;\r\n        }\r\n        100% {\r\n            left: 0;\r\n            opacity: 0;\r\n    }}\r\n\r\n    @keyframes animLineSwipeBarFadeOut {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animLineSwipeBorder{\r\n        0% {\r\n            opacity: 0;\r\n        }\r\n        25% {\r\n            opacity: 0;\r\n        }\r\n        75% {\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    @keyframes animLineSwipeContents {\r\n        0% {\r\n            clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);\r\n        }\r\n        2.4% {\r\n            clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);\r\n        }\r\n        26.8% {\r\n            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);\r\n        }\r\n        100% {\r\n            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);\r\n        }\r\n    }\r\n\r\n    .animGateMark {\r\n        p {\r\n            font-size: 100px;\r\n            margin-top: 50px;\r\n            margin-bottom: 50px;\r\n            position: relative;\r\n            width: fit-content;\r\n            transform: scale(0);\r\n            opacity:0;\r\n            animation: animGateMarkContent 5s ease-in-out infinite;\r\n\r\n            &::before,\r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                height: 100%;\r\n                width: 4px;\r\n                top: 0;\r\n                background-color: red;\r\n                transform: scale(0, 1);\r\n                animation: animGateMarkGate 5s ease-in-out infinite;\r\n            }\r\n            \r\n            &::before {\r\n                left: 0;\r\n                transform-origin: 0 50%;\r\n            }\r\n            \r\n            &::after {\r\n                right: 0;\r\n                transform-origin: 100% 50%;\r\n            }\r\n\r\n        }\r\n\r\n        @keyframes animGateMarkContent {\r\n            0% {\r\n                transform: scale(0);\r\n                opacity: 0;\r\n            }\r\n            20% {\r\n                transform: scale(1);\r\n                opacity: 1;\r\n            }\r\n            100% {\r\n                transform: scale(1);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        @keyframes animGateMarkGate {\r\n            0% {\r\n                transform: scale(0,1);\r\n            }\r\n            20% {\r\n                transform: scale(0,1);\r\n            }\r\n            30% {\r\n                transform: scale(1,1);\r\n            }\r\n            100% {\r\n                transform: scale(1,1);\r\n            }\r\n        }\r\n    }\r\n\r\n    .animDashOneByOne {\r\n        display: flex;\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        &.visible {\r\n            span {\r\n                display: inline-block;\r\n                transform: translateX(calc(-1em * var(--animDashOneByOneNum)));\r\n                animation: animDashOneByOneSlideIn 0.3s calc(0.3s * var(--animDashOneByOneNum)) forwards;\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animDashOneByOneSlideIn {\r\n        0% {\r\n            transform: translatex(calc(-1em * var(--animDashOneByOneNum)));\r\n        }\r\n        90% {\r\n            transform: translateX(100%);\r\n        }\r\n        100% {\r\n            transform: translateX(0);\r\n        }\r\n    }\r\n\r\n    .animBorderRoundTrail {\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        .animBorderRoundTrail__content{\r\n            position: relative;\r\n            padding: 1em;\r\n            width: fit-content;\r\n            outline: 0px solid var(--tte-borderRoundTrailBorderColor);\r\n        }\r\n\r\n        &.visible {\r\n            .animBorderRoundTrail__content{\r\n                animation: animBorderRoundTrail--finish 0.1s calc(calc(calc(0.05s * var(--num)) * 2) + 1s) ease-in-out forwards;\r\n        \r\n                &::before {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    width: 4px;\r\n                    top: 0;\r\n                    background-color: var(--tte-borderRoundTrailBorderColor);\r\n                    animation:\r\n                        animBorderRoundTrail--t2b 0.5s ease-out forwards,\r\n                        animBorderRoundTrail--b2t 0.5s calc(0.05s * var(--num)) ease-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    height: 4px;\r\n                    bottom: 0;\r\n                    left: 0;\r\n                    background-color: var(--tte-borderRoundTrailBorderColor);\r\n                    animation:\r\n                        animBorderRoundTrail--l2r calc(0.05s * var(--num)) calc(0.5s / 2) ease-out forwards,\r\n                        animBorderRoundTrail--r2l calc(0.05s * var(--num)) calc(calc(0.05s * var(--num)) + calc(0.5s / 2)) ease-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderRoundTrail--t2b {\r\n        0% {\r\n            height: 0;\r\n            left: 0;\r\n        }\r\n        50% {\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            bottom: 100%;\r\n        }\r\n        100% {\r\n            height: 0;\r\n            left: 0;\r\n            top: 100%;\r\n            bottom: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderRoundTrail--l2r {\r\n        0% {\r\n            width: 0;\r\n        }\r\n        50% {\r\n            width: 100%;\r\n            left: 0;\r\n            right: 100%;\r\n        }\r\n        100% {\r\n            width: 0%;\r\n            left: 100%;\r\n            right: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderRoundTrail--b2t {\r\n        0% {\r\n            height: 0;\r\n            right: 0;\r\n            left: 100%;\r\n        }\r\n        50% {\r\n            height: 100%;\r\n            right: 0;\r\n            left: 100%;\r\n            top: 0;\r\n            bottom: 100%;\r\n        }\r\n        100% {\r\n            height: 0;\r\n            right: 0;\r\n            left: 100%;\r\n            top: 0;\r\n            bottom: 100%;\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderRoundTrail--r2l {\r\n        0% {\r\n            width: 0;\r\n            top:0;\r\n            bottom: 100%;\r\n        }\r\n        50% {\r\n            width: 100%;\r\n            top:0;\r\n            bottom: 100%;\r\n            left: 0;\r\n            right: 100%;\r\n        }\r\n        100% {\r\n            width: 0%;\r\n            top: 0;\r\n            left: 0;\r\n            right: 100%;\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderRoundTrail--finish {\r\n        to {\r\n            outline-width: 4px;\r\n        }\t\r\n    }\r\n\r\n    .animBorderSplitTrailT2B {\r\n        --animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);\r\n        --animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);\r\n        --animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);\r\n        --animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);\r\n        --animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);\r\n        --animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);\r\n        --animBorderSplitTrail-a25: polygon(50% 0%, 100% 0%, 100% 0%, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 50% 4px);\r\n        --animBorderSplitTrail-a50: polygon(50% 0%, 100% 0%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 50% 4px);\r\n        --animBorderSplitTrail-a75: polygon(50% 0%, 100% 0%, 100% 100%, calc(100% - 4px) 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px, 50% 4px);\r\n        --animBorderSplitTrail-a100: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px, 50% 4px);\r\n    }\r\n\r\n    .animBorderSplitTrailB2T {\r\n        --animBorderSplitTrail-b0: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-b25: polygon(50% 100%, 0 100%, 0 calc(100% - 4px), 0 calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0   0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-a0: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-a25: polygon(50% 100%, 100% 100%, 100% calc(100% - 4px), 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-a50: polygon(50% 100%, 100% 100%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-a75: polygon(50% 100%, 100% 100%, 100% 0, calc(100% - 4px) 0, calc(100% - 4px) 4px,calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));\r\n        --animBorderSplitTrail-a100: polygon(50% 100%, 100% 100%, 100% 0, 50% 0, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 50% calc(100% - 4px));\r\n    }\r\n\r\n    .animBorderSplitTrailL2R {\r\n        --animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);\r\n        --animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);\r\n        --animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);\r\n        --animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);\r\n        --animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);\r\n        --animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);\r\n        --animBorderSplitTrail-a25: polygon(0 50%, 0 100%, 4px 100% , 4px 100%, 4px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);\r\n        --animBorderSplitTrail-a50: polygon(0 50%, 0 100%, 50% 100% , 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);\r\n        --animBorderSplitTrail-a75: polygon(0 50%, 0 100%, 100% 100%, 100% calc(100% - 4px), 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);\r\n        --animBorderSplitTrail-a100: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 50%);\r\n    }\r\n\r\n    .animBorderSplitTrailR2L {\r\n        --animBorderSplitTrail-b0: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-b25: polygon(100% 50%, 100% 0, calc(100% - 4px) 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-a0: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%, calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-a25: polygon(100% 50%, 100% 100%, calc(100% - 4px) 100% , calc(100% - 4px) 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-a50: polygon(100% 50%, 100% 100%, 50% 100% , 50% 100%, 50% calc(100% - 4px), 50% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-a75: polygon(100% 50%, 100% 100%, 0 100%, 0 calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);\r\n        --animBorderSplitTrail-a100: polygon(100% 50%, 100% 100%, 0 100%, 0 50%, 4px 50%, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%);\r\n    }\r\n\r\n    .animBorderSplitTrail {\r\n        font-size: 75px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        .animBorderSplitTrail__wrap{\r\n            position: relative;\r\n            width: fit-content;\r\n        }\r\n        .animBorderSplitTrail__content{\r\n            padding: 1em;\r\n        }\r\n\r\n        &.visible {\r\n            .animBorderSplitTrail__wrap {\r\n                &::before,\r\n                &::after {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: 0;\r\n                    width: 100%;\r\n                    height: 100%;\r\n                }\r\n\r\n                &::before {\r\n                    animation: animBorderSplitTrail--b 0.5s 0.5s forwards;\r\n                    clip-path: var(--animBorderSplitTrail-b0);\r\n                }\r\n            \r\n                &::after {\r\n                    animation: animBorderSplitTrail--a 0.5s 0.5s forwards;\r\n                    clip-path: var(--animBorderSplitTrail-a0);\r\n                }\r\n            }\r\n\r\n            .animBorderSplitTrail__wrap {\r\n                &::before,\r\n                &::after {\r\n                    background-color: RED;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animBorderSplitTrail--b {\r\n        0% { clip-path: var(--animBorderSplitTrail-b0); }\r\n        25% { clip-path: var(--animBorderSplitTrail-b25); }\r\n        50% { clip-path: var(--animBorderSplitTrail-b50); }\r\n        75% { clip-path: var(--animBorderSplitTrail-b75); }\r\n        100% { clip-path: var(--animBorderSplitTrail-b100); }\r\n    }\r\n\r\n    @keyframes animBorderSplitTrail--a {\r\n        0% { clip-path: var(--animBorderSplitTrail-a0); }\r\n        25% { clip-path: var(--animBorderSplitTrail-a25); }\r\n        50% { clip-path: var(--animBorderSplitTrail-a50); }\r\n        75% { clip-path: var(--animBorderSplitTrail-a75); }\r\n        100% { clip-path: var(--animBorderSplitTrail-a100); }\r\n    }\r\n\r\n    .animLineCurtain {\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        .animLineCurtain__wrap {\r\n            position: relative;\t\r\n            width: fit-content;\r\n        }\r\n        \r\n        .animLineCurtain__content {\r\n            opacity: 0;\r\n            width: fit-content;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        &.visible {\r\n            .animLineCurtain__wrap{\r\n                &::before {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    width: 100%;\r\n                    height: 3px;\r\n                    top: calc(0px - 3px);\r\n                    background-color: RED;\r\n                    animation: animLineCurtain--wrap 1s forwards;\r\n                }\r\n            }\r\n            \r\n            .animLineCurtain__content {\r\n                animation: animLineCurtain--content 1s 1s forwards;\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animLineCurtain--wrap {\r\n        0% {\r\n            top: calc(0px - 3px);\r\n        }\r\n        20% {\r\n            top: calc(100% - 3px);\r\n        }\r\n        60% {\r\n            top: calc(50%);\r\n        }\r\n        75% {\r\n            top: calc(100% - 3px);\r\n        }\r\n        90% {\r\n            top: calc(70%);\r\n        }\r\n        100% {\r\n            top: calc(100% - 3px);\r\n        }\r\n    }\r\n\r\n    @keyframes animLineCurtain--content {\r\n        to {opacity: 1;}\t\r\n    }\r\n\r\n    .animFlipCascade {\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        display: flex;\r\n        \r\n        span {\r\n            display: inline-block;\r\n            position: relative;\r\n            transform: perspective(10000px) rotate3d(0,1,0,0deg);\r\n            transition: transform 1s;\r\n        }\r\n        \r\n        &.visible {\r\n            span {\r\n                transition-delay: calc(var(--num) * 0.2s);\r\n                transform: perspective(1000px) rotate3d(0,1,0,720deg);\r\n            }\r\n        }\r\n    }\r\n\r\n    .animClockReveal {\r\n        .animClockReveal__content{\r\n            font-size: 100px;\r\n            margin-top: 50px;\r\n            margin-left: 50px;\r\n            margin-bottom: 50px;\r\n            width: fit-content;\r\n            clip-path:\r\n            polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);\r\n        }\r\n        \r\n        &.visible {\r\n            .animClockReveal__content{\r\n                animation: animClockReveal--right 2s linear forwards;\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animClockReveal--right {\r\n        0% {\r\n            clip-path:\r\n                polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);\r\n        }\r\n        25% {\r\n            clip-path:\r\n                polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%);\r\n        }\r\n        50% {\r\n            clip-path:\r\n                polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%);\r\n        }\r\n        75% {\r\n            clip-path:\r\n                polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0);\r\n        }\r\n        100% {\r\n            clip-path:\r\n                polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0);\r\n        }\r\n    }\r\n\r\n    .animHalfBackgroundRotate {\r\n        .animHalfBackgroundRotate__wrap {\r\n            position: relative;\r\n            width: fit-content;\r\n            overflow: hidden;\r\n            \r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                width: 100%;\r\n                height: 50%;\r\n                left: 0;\r\n                top: 50%;\r\n                background: RED;\r\n                transform-origin: 50% 0;\r\n            }\r\n        }\r\n        \r\n        .animHalfBackgroundRotate__content {\r\n            font-size: 60px;\r\n            margin-top: 50px;\r\n            margin-left: 50px;\r\n            margin-bottom: 50px;\r\n            width: fit-content;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n        \r\n        &.visible {\r\n            .animHalfBackgroundRotate__wrap {\r\n                &::after {\r\n                    animation: animHalfBackgroundRotate 1s cubic-bezier(.97,-0.35,.21,1.32) forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animHalfBackgroundRotate {\r\n        to {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    .animBlurZoomIn {\r\n        font-size: 100px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        span {\r\n            display: inline-block;\r\n            opacity: 0;\r\n            transform: scale(2);\r\n        }\r\n        \r\n        &.visible {\r\n            span {\r\n                animation: animBlurZoomIn 1s calc(var(--num) * 0.2s + 0.5s) forwards;\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animBlurZoomIn {\r\n        0% {\r\n            transform: scale(4);\r\n            filter: blur(4px);\r\n            opacity: 0;\r\n        }\r\n        20% {\r\n            transform: scale(1.6);\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            transform: scale(1);\r\n            filter: blur(0);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .animDoubleLineSlideIn {\r\n        font-size: 75px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        .animDoubleLineSlideIn__wrap {\r\n            position: relative;\r\n            width: fit-content;\r\n            overflow: hidden;\r\n            \r\n            &::before,\r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                width: 100%;\r\n                height: 4px;\r\n                background-color: red;\r\n            }\r\n            \r\n            &::before {\r\n                top: 0;\r\n                left: 0;\r\n                transform: translateX(-100%);\r\n            }\r\n            \r\n            &::after {\r\n                bottom: 0;\r\n                right: 0;\r\n                transform: translateX(100%);\r\n            }\r\n        }\r\n        \r\n        &.visible {\r\n            .animDoubleLineSlideIn__wrap {\r\n                &::before,\r\n                &::after {\r\n                    animation: animDoubleLineSlideIn 0.3s 0.5s ease-in-out forwards;\r\n                }\r\n            }\r\n            \r\n            .animDoubleLineSlideIn__content {\r\n                animation: animDoubleLineSlideIn 0.3s 0.7s ease-in-out forwards;\r\n            }\r\n        }\r\n    }\r\n\r\n    .animDoubleLineSlideIn__content {\r\n        transform: translateX(-100%);\r\n    }\r\n\r\n    @keyframes animDoubleLineSlideIn {\r\n        to {\r\n            transform: translateX(0);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow1 {\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        .animAccentUnderlineGrow1__content {\r\n            position: relative;\r\n            width: fit-content;\r\n        \r\n            &::before,\r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                bottom: 0;\r\n                left: 50%;\r\n                background-color: RED;\r\n                transform: translate(-50%, 50%) scaleX(0);\r\n                transform-origin: 50% 50%;\r\n            }\r\n        \r\n            &::before {\r\n                width: min(80%, 4em);\r\n                height: 3px;\r\n            }\r\n            \r\n            &::after {\r\n                width: min(20%, 1em);\r\n                height: 8px;\r\n            }\r\n        }\r\n        \r\n        &.visible {\r\n            .animAccentUnderlineGrow1__content {\r\n                &::before,\r\n                &::after {\r\n                    animation: animAccentUnderlineGrow1 0.3s 0.5s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow1 {\r\n        to {\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\t\r\n    }\r\n\r\n    .animAccentUnderlineGrow2 {\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        .animAccentUnderlineGrow2__content {\r\n            position: relative;\r\n            width: fit-content;\r\n            \r\n            &::before,\r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                bottom: 0;\r\n                background-color: RED;\r\n                transform-origin: 0 50%;\r\n            }\r\n            \r\n            &::before {\r\n                width: 100%;\r\n                height: 1px;\r\n                left: 0;\r\n                transform: translateY(50%) scaleX(0);\r\n            }\r\n            \r\n            &::after {\r\n                width: min(20%, 1em);\r\n                height: 4px;\r\n                right: 0;\r\n                transform: translateY(50%);\r\n                opacity: 0;\r\n            }\r\n        }\r\n        \r\n        &.visible {\r\n            .animAccentUnderlineGrow2__content {\r\n                &::before{\r\n                    animation: animAccentUnderlineGrow2__long 0.3s 0.5s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation: animAccentUnderlineGrow2__short 0.5s 0.8s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow2__long {\r\n        to{\r\n            transform: translateY(50%) scaleX(1);\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow2__short {\r\n        0% {\r\n            opacity: 0;\r\n            right: 0;\r\n            left: 100%;\r\n        }\r\n        70% {\r\n            left: 0;\r\n        }\r\n        85% {\r\n            left: 0.5em;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            left: 0;\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow3 {\t\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        &.visible {\r\n            .animAccentUnderlineGrow3__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow3--line 0.3s 0.3s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation:animAccentUnderlineGrow3--dot 0.3s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow3__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            background-color: RED;\r\n        }\r\n        \r\n        &::before {\r\n            width: min(80%, 4em);\r\n            height: 1px;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n        }\r\n\r\n        &::after {\r\n            width: 10px;\r\n            height: 10px;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, 50%);\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow3--line {\r\n        to {\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\t\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow3--dot {\r\n        to {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow4 {\r\n        &.visible {\r\n            .animAccentUnderlineGrow4__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow4--line 0.3s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation: animAccentUnderlineGrow4--dot 1s 0.3s linear forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow4__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        padding-bottom: 0.5em;\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            background-color: RED;\r\n        }\r\n        \r\n        &::before {\r\n            width: 100%;\r\n            height: 1px;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n            transform-origin: 0 50%;\r\n        }\r\n\r\n        &::after {\r\n            width: 10px;\r\n            height: 10px;\r\n            left: 100%;\r\n            border-radius: 50%;\r\n            transform: translateY(50%);\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow4--line {\r\n        to {\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow4--dot {\r\n        0% { opacity: 1; }\r\n        60% { left: 0; }\r\n        70% { left: 1.6em; }\r\n        80% { left: 0.7em; }\r\n        90% { left: 1.2em; } \r\n        100% { left: 1em; opacity: 1;}\r\n    }\r\n\r\n    .animAccentUnderlineGrow5 {\t\r\n        &.visible {\r\n            .animAccentUnderlineGrow5__wrap {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow5--left 0.3s 0.3s ease-in-out forwards;\r\n                }\t\r\n                &::after {\r\n                    animation: animAccentUnderlineGrow5--right 0.3s 0.3s ease-in-out forwards;\r\n                }\t\r\n            }\r\n            \r\n            .animAccentUnderlineGrow5__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow5--line 0.3s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow5__wrap {\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        position: relative;\r\n        width: fit-content;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            width: min(20%, 1em);\r\n            height: 4px;\r\n            bottom: 0;\r\n            background-color: RED;\r\n            opacity: 0;\r\n        }\r\n        \r\n        &::before {\r\n            left: 50%;\r\n            transform: translate(-50%, 50%);\r\n        }\r\n        \r\n        &::after {\r\n            right: 50%;\r\n            transform: translate(50%, 50%);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow5__content {\r\n        position: relative;\r\n        width: fit-content;\r\n\r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 1px;\r\n            bottom: 0;\r\n            left: 50%;\r\n            background-color: RED;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow5--line {\r\n        to {\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow5--left {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n        70% {\r\n            left: 0;\r\n        }\r\n        80% {\r\n            left: 0.5em;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            left: 0;\r\n            transform: translate(0, 50%);\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow5--right {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n        70% {\r\n            right: 0;\r\n        }\r\n        85% {\r\n            right: 0.5em;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            right: 0;\r\n            transform: translate(0, 50%);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow6 {\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n\r\n        &.visible {\r\n            .animAccentUnderlineGrow6__wrap {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow6--left 0.3s 0.3s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation: animAccentUnderlineGrow6--right 0.3s 0.3s ease-in-out forwards;\r\n                }\r\n            }\r\n            \r\n            .animAccentUnderlineGrow6__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow6--line 0.3s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow6__wrap {\r\n        position: relative;\r\n        width: fit-content;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            width: 10px;\r\n            height: 10px;\r\n            background-color: RED;\r\n            border-radius: 50%;\r\n            opacity: 0;\r\n        }\r\n        \r\n        &:before {\r\n            left: 50%;\r\n            transform: translate(-50%, 50%);\r\n        }\r\n        \r\n        &::after {\r\n            right: 50%;\r\n            transform: translate(50%, 50%);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow6__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        padding-bottom: 0.5em;\r\n        \r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 1px;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n            background-color: RED;\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow6--left {\r\n        0% { opacity: 1; }\r\n        60% { left: 0; }\r\n        70% { left: 1.6em; }\r\n        80% { left: 0.7em; }\r\n        90% { left: 1.2em; } \r\n        100% { left: 1em; opacity: 1;}\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow6--right {\r\n        0% { opacity: 1; }\r\n        60% { right: 0; }\r\n        70% { right: 1.6em; }\r\n        80% { right: 0.7em; }\r\n        90% { right: 1.2em; } \r\n        100% { right: 1em; opacity: 1;}\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow6--line {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow7 {\t\r\n        &.visible {\r\n            .animAccentUnderlineGrow7__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow7--line 0.3s 0.8s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation:animAccentUnderlineGrow7--square 0.3s 0.5s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow7__wrap {\r\n        width: fit-content;\r\n    }\r\n\r\n    .animAccentUnderlineGrow7__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            background-color: RED;\r\n        }\r\n        \r\n        &::before {\r\n            width: min(80%, 4em);\r\n            height: 1px;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n        }\r\n\r\n        &::after {\r\n            width: 10px;\r\n            height: 10px;\r\n            transform: translate(-50%, 50%) rotate(45deg);\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow7--line {\r\n        to {\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\t\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow7--square {\r\n        to {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow8 {\r\n        &.visible {\r\n            .animAccentUnderlineGrow8__wrap {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow8--left 0.3s 0.8s ease-in-out forwards;\r\n                }\r\n                \r\n                &::after {\r\n                    animation: animAccentUnderlineGrow8--right 0.3s 0.8s ease-in-out forwards;\r\n                }\r\n            }\r\n            \r\n            .animAccentUnderlineGrow8__content {\r\n                &::before {\r\n                    animation: animAccentUnderlineGrow8--line 0.3s 0.5s ease-in-out forwards;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow8__wrap {\r\n        position: relative;\r\n        width: fit-content;\r\n        \r\n        &::before,\r\n        &::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            width: 10px;\r\n            height: 10px;\r\n            background-color: RED;\r\n            opacity: 0;\r\n        }\r\n        \r\n        &:before {\r\n            left: 50%;\r\n            transform: translate(-50%, 50%) rotate(45deg);\r\n        }\r\n        \r\n        &::after {\r\n            right: 50%;\r\n            transform: translate(50%, 50%) rotate(-45deg);\r\n        }\r\n    }\r\n\r\n    .animAccentUnderlineGrow8__content {\r\n        position: relative;\r\n        padding-bottom: 0.5em;\r\n        font-size: 60px;\r\n        margin-top: 50px;\r\n        margin-left: 50px;\r\n        margin-bottom: 50px;\r\n        \r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 1px;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translate(-50%, 50%) scaleX(0);\r\n            background-color: RED;\r\n        }\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow8--left {\r\n        0% { opacity: 1; transform: translate(-50%, 50%) rotate(45deg);}\r\n        60% { left: 0; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.6));}\r\n        70% { left: 1.6em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.7));}\r\n        80% { left: 0.7em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.8));}\r\n        90% { left: 1.2em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.9));}\r\n        100% { left: 1em; opacity: 1; transform: translate(-50%, 50%) rotate(405deg);}\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow8--right {\r\n        0% { opacity: 1; transform: translate(50%, 50%) rotate(-45deg)}\r\n        60% { right: 0; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.6);}\r\n        70% { right: 1.6em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.7);}\r\n        80% { right: 0.7em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.8);}\r\n        90% { right: 1.2em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.9);} \r\n        100% { right: 1em; opacity: 1; transform: translate(50%, 50%) rotate(-405deg);}\r\n    }\r\n\r\n    @keyframes animAccentUnderlineGrow8--line {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            transform: translate(-50%, 50%) scaleX(1);\r\n        }\r\n    }\r\n\r\n}\r\n"],"names":[],"sourceRoot":""}