{"version":3,"file":"menu-style.css","mappings":"AAAA,MACI,uCAGJ,iBACI,YAGJ,kBACI,eAGJ,UACI,WACA,kBACA,iBACA,sBAEA,aACI,kBACA,kBAEA,qBACI,WACA,kBACA,SACA,SACA,2BACA,UACA,WACA,sBAKZ,yBACI,eAGJ,mCACI,iBAGJ,qBACI,eAEA,qCACI,aACA,QACA,2BACA,mBAEA,iDACI,WACA,YACA,yCACA,sBAKZ,+BACI,iBAGJ,wBACI,eAGJ,kCACI,iBAGJ,mCACI,aACA,uCACA,QAGJ,8BACI,YACA,sBAGJ,kCACI,kBACA,iBACA,YACA,YACA,sBAIA,8DACI,kBACA,kBACA,gBAEA,sEACI,WACA,kBACA,QACA,YACA,qBACA,MAIR,+DACI,kBACA,4BAKA,6EACI,gEAGJ,sEACI,yDAIZ,qDACI,GACI,QACA,OACA,wBAEJ,IACI,WACA,OACA,uBAEJ,IACI,WACA,OACA,WAEJ,IACI,QACA,QACA,UAEJ,KACI,QACA,QACA,WAIR,8CACI,GACI,4BAEJ,IACI,4BAEJ,IACI,wBAEJ,KACI,yBAMJ,yBACI,qBACA,4BACA,UACA,4BACA,wBACA,sDACA,yDACA,mCAKR,wBACI,GACI,UACA,4BAEJ,GACI,UACA,0BAEJ,IACI,UACA,wBAEJ,KACI,UACA,yBAMJ,yBACI,qBACA,2BACA,UACA,4BACA,wBACA,sDACA,yDACA,mCAKR,wBACI,GACI,UACA,2BAEJ,GACI,UACA,2BAEJ,IACI,UACA,wBAEJ,KACI,UACA,yBAMP,uBACC,qBACA,mBACM,sBACA,mCACA,wCAEA,sCACI,8BAGJ,uCACI,+BAKZ,0BACC,GACI,0BAEF,IACE,mCACH,4BAED,IACC,0BACA,oBAEC,KACE,2BAIL,2BACC,GACI,0BAEF,IACE,mCACH,4BAEC,KACK,2BAIR,wBACI,eAEA,oFACI,yBACA,iBAGJ,sDACI,YAIR,eACI,aACA,iBAGJ,4BACI,gBACA,iBAGJ,8BACI,aACA,mBAEA,sDACI,SAIR,eACC,kBACA,kBAEA,uBACC,WACA,kBACA,UACA,YACA,MACA,OACA,qBACA,6CACU,CAGX,sBACC,WACA,kBACA,UACA,YACA,MACA,OACA,qBACA,UACA,wDAGD,iBACC,kBACA,kBACA,SACA,8EAIF,iCACI,GACI,OACA,UAEJ,MACI,UACA,UAEJ,MACI,UACA,UAEJ,KACI,OACA,WAGR,mCACC,GACC,UAED,KACC,WAIF,+BACI,GACI,UAEJ,IACI,UAEJ,IACI,UAEP,KACC,WAIF,iCACE,GACE,4CAEF,KACE,4CAEF,MACE,kDAEF,KACE,mDAKA,gBACI,kBACA,kBACA,mBACA,UACA,sDAEA,+CAEI,WACA,kBACA,YACA,UACA,MACA,qBACA,sBACA,mDAGJ,wBACI,OACA,uBAGJ,uBACI,QACA,0BAKR,+BACI,GACI,mBACA,UAEJ,IACI,mBACA,UAEJ,KACI,mBACA,WAIR,4BACI,GACI,sBAEJ,IACI,sBAEJ,IACI,sBAEJ,KACI,uBAKZ,kBACI,aACA,gBACA,mBAGI,+BACI,qBACA,8DACA,oFAKZ,mCACC,GACC,8DAED,IACC,2BAED,KACI,yBAKD,qDACI,kBACA,YACA,kBACA,yDAIA,6DACI,4FAEA,qEACI,WACA,kBACA,UACA,MACA,wDACA,8HACI,CAIR,oEACI,WACA,kBACA,WACA,SACA,OACA,wDACA,4KACI,CAOpB,qCACC,GACC,SACA,OAED,IACC,YACA,MACA,OACA,YAED,KACC,SACA,OACA,SACA,UAIF,qCACC,GACC,QAED,IACC,WACA,OACA,WAED,KACC,SACA,UACA,SAIF,qCACC,GACC,SACA,QACA,UAED,IACC,YACA,QACA,UACA,MACA,YAED,KACC,SACA,QACA,UACA,MACA,aAIF,qCACC,GACC,QACA,MACA,YAED,IACC,WACA,MACA,YACA,OACA,WAED,KACC,SACA,MACA,OACA,YAIF,wCACC,GACC,mBAIF,yBACI,uGACA,mGACA,mGACA,sGACA,iIACA,uGACA,mJACA,oJACA,4LACA,mKAGJ,yBACI,mKACA,sLACA,kIACA,gIACA,iIACA,mKACA,sOACA,kLACA,yLACA,iKAGJ,yBACI,mGACA,mGACA,mGACA,gIACA,iIACA,mGACA,mJACA,mJACA,8KACA,iKAGJ,yBACI,mKACA,sLACA,mIACA,gIACA,iIACA,mKACA,uOACA,mLACA,0LACA,iKAIA,kDACI,kBACA,kBAEJ,qDACI,YAKI,mIAEI,WACA,kBACA,MACA,OACA,WACA,YACA,qBAGJ,kEACI,kDACA,yCAGJ,iEACI,kDACA,yCAMhB,mCACC,4CACA,8CACA,8CACA,8CACA,iDAGD,mCACC,4CACA,8CACA,8CACA,8CACA,iDAIA,wCACC,kBACA,kBAGD,2CACC,UACA,kBACA,gBAKC,wDACC,WACA,kBACA,WACA,WACA,SACA,qBACA,4CAIF,mDACC,kDAKH,iCACC,GACC,SAED,IACC,qBAED,IACC,QAED,IACC,qBAED,IACC,QAED,KACC,sBAIF,oCACC,cAGD,iBACI,aAEA,sBACI,qBACA,kBACA,uDACA,wBAIN,8BACC,sCACA,wDAMC,2CACI,kBACA,8FACA,CAIA,mDACI,oDAKZ,kCACC,GACC,uGACC,CAEF,IACC,oGACC,CAEF,IACC,sGACC,CAEF,IACC,oGACC,CAEF,KACC,qGACC,EAKF,0DACC,kBACA,kBACA,gBAEA,iEACC,WACA,kBACA,WACA,WACA,OACA,QACA,eACA,uBAIF,6DACC,kBACM,kBACA,UAKL,yEACC,qFAMJ,oCACC,GACC,0BAKE,qBACI,qBACA,UACA,mBAIA,6BACI,0DAKZ,0BACC,GACC,mBACA,iBACA,UAED,IACC,qBACA,UAED,KACC,mBACA,eACA,WAKD,oDACC,kBACA,kBACA,gBAEA,uHAEC,WACA,kBACA,WACA,WACA,qBAGD,4DACC,MACA,OACA,4BAGD,2DACC,SACA,QACA,2BAMA,uIAEC,6DAIF,+DACC,6DAKH,gCACC,4BAGD,iCACC,GACC,yBAKD,6DACC,kBACA,kBAEA,yIAEC,WACA,kBACA,SACA,SACA,qBACA,yCACA,yBAGD,qEACC,mBACA,WAGD,oEACC,mBACA,WAMA,yJAEC,gEAMJ,oCACC,GACC,0CAKD,6DACC,kBACA,kBAEA,yIAEC,WACA,kBACA,SACA,qBACA,uBAGD,qEACC,WACA,WACA,OACA,oCAGD,oEACC,mBACA,WACA,QACA,0BACA,UAMA,6EACC,sEAGD,4EACC,uEAMJ,0CACC,GACC,qCAIF,2CACC,GACC,UACA,QACA,UAED,IACC,OAED,IACC,UAED,KACC,UACA,QAOC,6EACC,sEAGD,4EACC,iEAMJ,mCACC,kBACA,kBAEA,qFAEC,WACA,kBACA,SACA,SACA,qBAGD,2CACC,mBACA,WACA,yCAGD,0CACC,WACA,YACA,kBACA,+BACA,UAIF,0CACC,GACC,0CAIF,yCACC,GACC,WAOC,6EACC,kEAGD,4EACC,+DAMJ,mCACC,kBACA,kBACG,oBAEH,qFAEC,WACA,kBACA,SACA,SACA,qBAGD,2CACC,WACA,WACA,yCACA,uBAGD,0CACC,WACA,YACA,UACA,kBACA,0BACA,UAIF,0CACC,GACC,0CAIF,yCACC,aACA,WACA,eACA,cACA,eACA,yBAME,0EACC,sEAED,yEACC,uEAKD,6EACC,kEAMJ,gCACC,kBACA,kBAEA,+EAEC,WACA,kBACA,mBACA,WACA,SACA,qBACA,UAGD,wCACC,SACA,+BAGD,uCACC,UACA,8BAIF,mCACC,kBACA,kBAEA,2CACC,WACA,kBACA,WACA,WACA,SACA,SACA,qBACA,yCAIF,0CACC,GACC,0CAIF,0CACC,GACC,UAED,IACC,OAED,IACC,UAED,KACC,UACA,OACA,6BAIF,2CACC,GACC,UAED,IACC,QAED,IACC,WAED,KACC,UACA,QACA,6BAOC,0EACC,sEAGD,yEACC,uEAKD,6EACC,kEAMJ,gCACC,kBACA,kBAEA,+EAEC,WACA,kBACA,SACA,WACA,YACA,qBACA,kBACA,UAGD,uCACC,SACA,+BAGD,uCACC,UACA,8BAIF,mCACC,kBACA,kBACA,oBAEA,2CACC,WACA,kBACA,WACA,WACA,SACA,SACA,yCACA,qBAIF,0CACC,aACA,WACA,eACA,cACA,eACA,yBAGD,2CACC,aACA,YACA,gBACA,eACA,gBACA,0BAGD,0CACC,GACC,UAED,KACC,UACA,0CAOC,6EACC,sEAGD,4EACC,wEAMJ,gCACC,kBAGD,mCACC,kBACA,kBACA,oBAEA,qFAEC,WACA,kBACA,SACA,SACA,qBAGD,2CACC,mBACA,WACA,yCAGD,0CACC,WACA,YACA,6CACA,UAIF,0CACC,GACC,0CAIF,4CACC,GACC,WAOC,0EACC,sEAGD,yEACC,uEAKD,6EACC,sEAMJ,gCACC,kBACA,kBAEA,+EAEC,WACA,kBACA,SACA,WACA,YACA,qBACA,UAGD,uCACC,SACA,6CAGD,uCACC,UACA,6CAIF,mCACC,kBACA,oBAEA,2CACC,WACA,kBACA,WACA,WACA,SACA,SACA,yCACA,qBAIF,0CACC,0DACA,yDACA,6DACA,4DACA,6DACA,uEAGD,2CACC,0DACA,0DACA,8DACA,6DACA,8DACA,wEAGD,0CACC,GACC,UAED,KACC,UACA,0C","sources":["webpack://tantive-text-effects/./src/css/menu-style.scss"],"sourcesContent":[":root {\r\n    --tte-borderRoundTrailBorderColor: red;\r\n}\r\n\r\n.ttef-usage-wrap {\r\n    padding: 1em;\r\n}\r\n\r\n.ttef-section-toc {\r\n    margin-top: 2em;\r\n}\r\n\r\n.ttef-toc {\r\n    width: 20em;\r\n    padding-right: 1em;\r\n    padding-left: 1em;\r\n    border: 1px solid #ccc;\r\n\r\n    h2 {\r\n        position: relative;\r\n        text-align: center;\r\n\r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 50%;\r\n            height: 2px;\r\n            background-color: #ccc;\r\n        }\r\n    }\r\n}\r\n\r\n.ttef-section-basicUsage {\r\n    margin-top: 2em;\r\n}\r\n\r\n.ttef-section-basicUsage--contents {\r\n    padding-left: 2em;\r\n}\r\n\r\n.ttef-section-notice {\r\n    margin-top: 2em;\r\n\r\n    .hasDisplayFlex {\r\n        display: flex;\r\n        gap: 2em;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n\r\n        .ttef-arrow {\r\n            width: 30px;\r\n            height: 30px;\r\n            clip-path: polygon(0 0, 100% 50%, 0 100%);\r\n            background-color: #ccc;\r\n        }\r\n    }\r\n}\r\n\r\n.ttef-section-notice--contents {\r\n    padding-left: 2em;\r\n}\r\n\r\n.ttef-section-catalogue {\r\n    margin-top: 2em;\r\n}\r\n\r\n.ttef-section-catalogue--contents {\r\n    padding-left: 2em;\r\n}\r\n\r\n.ttef-section-catalogue__container {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 200px);\r\n    gap: 1em;\r\n}\r\n\r\n.ttef-section-catalogue__item {\r\n    padding: 1em;\r\n    border: 1px solid #ccc;\r\n}\r\n\r\n.ttef-section-catalogue__playArea {\r\n    margin-right: auto;\r\n    margin-left: auto;\r\n    padding: 1em;\r\n    height: 75px;\r\n    background-color: white;\r\n}\r\n\r\n.animSquareSlideInFromLeft {\r\n    .animSquareSlideInFromLeft__Square {\r\n        position: relative;\r\n        width: fit-content;\r\n        overflow: hidden;\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        width: fit-content;\r\n        transform: translateX(-100%);\r\n    }\r\n}\r\n\r\n.ttef-section-catalogue__playArea {\r\n        .animSquareSlideInFromLeft__Square::before {\r\n            animation: animSquareSlideInFromLeft__square--before 2s infinite;\r\n        }\r\n\r\n        .animSquareSlideInFromLeft__content {\r\n            animation: animSquareSlideInFromLeft__content 2s 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    16% {\r\n        width: 100%;\r\n        left: 0;\r\n        transform: translatX(0);\r\n    }\r\n    40% {\r\n        width: 100%;\r\n        left: 0;\r\n        right: 100%;\r\n    }\r\n    50% {\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    40% {\r\n        transform: translateX(-100%);\r\n    }\r\n    50% {\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\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: 7.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    }\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    5% {\r\n        opacity: 1;\r\n        transform: translateY(30%);\r\n    }\r\n    10% {\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\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: 7.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    }\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    5% {\r\n        opacity: 1;\r\n        transform: translateY(-30%);\r\n    }\r\n    10% {\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\t\r\n\t.tteLetter {\r\n\t\tdisplay: inline-block;\r\n\t\tmargin-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\t}\r\n}\r\n\r\n@keyframes animPopOut-odd {\r\n\t0% {\r\n    \ttransform: translate(0, 0);\r\n  \t}\r\n  \t25% {\r\n    \ttransform: translate(0.1em, -0.1em);\r\n\t\ttext-shadow: -0.1em 0.1em red;\r\n  \t}\r\n\t75% {\r\n\t\ttransform: translate(0, 0);\r\n\t\ttext-shadow: 0 0  red;\r\n\t}\r\n  \t100% {\r\n    \ttransform: translate(0, 0);\r\n  \t}\r\n}\r\n\r\n@keyframes animPopOut-even {\r\n\t0% {\r\n    \ttransform: translate(0, 0);\r\n  \t}\r\n  \t50% {\r\n    \ttransform: translate(0.1em, -0.1em);\r\n\t\ttext-shadow: -0.1em 0.1em red;\r\n  \t}\r\n  \t100% {\r\n        transform: translate(0, 0);\r\n  \t}\r\n}\r\n\r\n.ttef-section-setttings {\r\n    margin-top: 2em;\r\n\r\n    table, td, th {\r\n        border-collapse: collapse;\r\n        border: 1px solid;\r\n    }\r\n\r\n    td, th {\r\n        padding: 1em;\r\n    }\r\n}\r\n\r\n.tteSettingBox {\r\n    display: flex;\r\n    padding-left: 2em;\r\n}\r\n\r\n.tteSettingsContents--title {\r\n    margin-left: 1em;\r\n    margin-right: 1em;\r\n}\r\n\r\n.tteSettingsContents--content {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    .wp-color-result.button {\r\n        margin: 0;\r\n    }\r\n}\r\n\r\n.animLineSwipe {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\t\r\n\t&::before {\r\n\t\tcontent:\"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 4px;\r\n\t\theight: 100%;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tbackground-color: red;\r\n\t\tanimation:\r\n            animLineSwipeBarSwipe 4.1s infinite;\r\n\t}\r\n\t\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 4px;\r\n\t\theight: 100%;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tbackground-color: red;\r\n\t\topacity: 0;\r\n\t\tanimation: animLineSwipeBorder 4.1s ease-in-out infinite;\r\n\t}\r\n\t\r\n\tp {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\tmargin: 0;\r\n\t\tanimation: animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite;\r\n\t}\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\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t}\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\t100% {\r\n\t\topacity: 1;\r\n\t}\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        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\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\t0% {\r\n\t\ttransform: translatex(calc(-1em * var(--animDashOneByOneNum)));\r\n\t}\r\n\t90% {\r\n\t\ttransform: translateX(100%);\r\n\t}\r\n\t100% {\r\n    \ttransform: translateX(0);\r\n  \t}\r\n}\r\n\r\n.animBorderRoundTrail {\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.1s * 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.1s * 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.1s * var(--num)) calc(0.5s / 2) ease-out forwards,\r\n                    animBorderRoundTrail--r2l calc(0.1s * var(--num)) calc(calc(0.1s * 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\t0% {\r\n\t\theight: 0;\r\n\t\tleft: 0;\r\n\t}\r\n\t50% {\r\n\t\theight: 100%;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tbottom: 100%;\r\n\t}\r\n\t100% {\r\n\t\theight: 0;\r\n\t\tleft: 0;\r\n\t\ttop: 100%;\r\n\t\tbottom: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animBorderRoundTrail--l2r {\r\n\t0% {\r\n\t\twidth: 0;\r\n\t}\r\n\t50% {\r\n\t\twidth: 100%;\r\n\t\tleft: 0;\r\n\t\tright: 100%;\r\n\t}\r\n\t100% {\r\n\t\twidth: 0%;\r\n\t\tleft: 100%;\r\n\t\tright: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animBorderRoundTrail--b2t {\r\n\t0% {\r\n\t\theight: 0;\r\n\t\tright: 0;\r\n\t\tleft: 100%;\r\n\t}\r\n\t50% {\r\n\t\theight: 100%;\r\n\t\tright: 0;\r\n\t\tleft: 100%;\r\n\t\ttop: 0;\r\n\t\tbottom: 100%;\r\n\t}\r\n\t100% {\r\n\t\theight: 0;\r\n\t\tright: 0;\r\n\t\tleft: 100%;\r\n\t\ttop: 0;\r\n\t\tbottom: 100%;\r\n\t}\r\n}\r\n\r\n@keyframes animBorderRoundTrail--r2l {\r\n\t0% {\r\n\t\twidth: 0;\r\n\t\ttop:0;\r\n\t\tbottom: 100%;\r\n\t}\r\n\t50% {\r\n\t\twidth: 100%;\r\n\t\ttop:0;\r\n\t\tbottom: 100%;\r\n\t\tleft: 0;\r\n\t\tright: 100%;\r\n\t}\r\n\t100% {\r\n\t\twidth: 0%;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tright: 100%;\r\n\t}\r\n}\r\n\r\n@keyframes animBorderRoundTrail--finish {\r\n\tto {\r\n\t\toutline-width: 4px;\r\n\t}\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    .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                background-color: RED;\r\n            }\r\n\r\n            &::before {\r\n                animation: animBorderSplitTrail--b 0.5s 1s forwards;\r\n                clip-path: var(--animBorderSplitTrail-b0);\r\n            }\r\n        \r\n            &::after {\r\n                animation: animBorderSplitTrail--a 0.5s 1s forwards;\r\n                clip-path: var(--animBorderSplitTrail-a0);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@keyframes animBorderSplitTrail--b {\r\n\t0% { clip-path: var(--animBorderSplitTrail-b0); }\r\n\t25% { clip-path: var(--animBorderSplitTrail-b25); }\r\n\t50% { clip-path: var(--animBorderSplitTrail-b50); }\r\n\t75% { clip-path: var(--animBorderSplitTrail-b75); }\r\n\t100% { clip-path: var(--animBorderSplitTrail-b100); }\r\n}\r\n\r\n@keyframes animBorderSplitTrail--a {\r\n\t0% { clip-path: var(--animBorderSplitTrail-a0); }\r\n\t25% { clip-path: var(--animBorderSplitTrail-a25); }\r\n\t50% { clip-path: var(--animBorderSplitTrail-a50); }\r\n\t75% { clip-path: var(--animBorderSplitTrail-a75); }\r\n\t100% { clip-path: var(--animBorderSplitTrail-a100); }\r\n}\r\n\r\n.animLineCurtain {\t\r\n\t.animLineCurtain__wrap {\r\n\t\tposition: relative;\t\r\n\t\twidth: fit-content;\r\n\t}\r\n\t\r\n\t.animLineCurtain__content {\r\n\t\topacity: 0;\r\n\t\twidth: fit-content;\r\n\t\toverflow: hidden;\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.animLineCurtain__wrap{\r\n\t\t\t&::before {\r\n\t\t\t\tcontent: \"\";\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 3px;\r\n\t\t\t\ttop: calc(0px - 3px);\r\n\t\t\t\tbackground-color: RED;\r\n\t\t\t\tanimation: animLineCurtain--wrap 1s forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t.animLineCurtain__content {\r\n\t\t\tanimation: animLineCurtain--content 1s 1s forwards;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@keyframes animLineCurtain--wrap {\r\n\t0% {\r\n\t\ttop: calc(0px - 3px);\r\n\t}\r\n\t20% {\r\n\t\ttop: calc(100% - 3px);\r\n\t}\r\n\t60% {\r\n\t\ttop: calc(50%);\r\n\t}\r\n\t75% {\r\n\t\ttop: calc(100% - 3px);\r\n\t}\r\n\t90% {\r\n\t\ttop: calc(70%);\r\n\t}\r\n\t100% {\r\n\t\ttop: calc(100% - 3px);\r\n\t}\r\n}\r\n\r\n@keyframes animLineCurtain--content {\r\n\tto {opacity: 1;}\t\r\n}\r\n\r\n.animFlipCascade {\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\t}\r\n\t\r\n\t&.visible {\r\n\t\tspan {\r\n\t\t\ttransition-delay: calc(var(--num) * 0.2s);\r\n\t\t\ttransform: perspective(1000px) rotate3d(0,1,0,720deg);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animClockReveal {\r\n    .animClockReveal__content{\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\t\r\n\t&.visible {\r\n        .animClockReveal__content{\r\n            animation: animClockReveal--right 2s linear forwards;\r\n        }\r\n\t}\r\n}\r\n\r\n@keyframes animClockReveal--right {\r\n\t0% {\r\n\t\tclip-path:\r\n\t\t\tpolygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);\r\n\t}\r\n\t25% {\r\n\t\tclip-path:\r\n\t\t\tpolygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%);\r\n\t}\r\n\t50% {\r\n\t\tclip-path:\r\n\t\t\tpolygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%);\r\n\t}\r\n\t75% {\r\n\t\tclip-path:\r\n\t\t\tpolygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0);\r\n\t}\r\n\t100% {\r\n\t\tclip-path:\r\n\t\t\tpolygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0);\r\n\t}\r\n}\r\n\r\n.animHalfBackgroundRotate {\r\n\t.animHalfBackgroundRotate__wrap {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\toverflow: hidden;\r\n\t\t\r\n\t\t&::after {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 50%;\r\n\t\t\tleft: 0;\r\n\t\t\ttop: 50%;\r\n\t\t\tbackground: RED;\r\n\t\t\ttransform-origin: 50% 0;\r\n\t\t}\r\n\t}\r\n\t\r\n\t.animHalfBackgroundRotate__content {\r\n\t\twidth: fit-content;\r\n        position: relative;\r\n        z-index: 3;\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.animHalfBackgroundRotate__wrap {\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animHalfBackgroundRotate 1s cubic-bezier(.97,-0.35,.21,1.32) forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@keyframes animHalfBackgroundRotate {\r\n\tto {\r\n\t\ttransform: rotate(360deg);\r\n\t}\r\n}\r\n\r\n.animBlurZoomIn {\r\n    span {\r\n        display: inline-block;\r\n        opacity: 0;\r\n        transform: scale(2);\r\n    }\r\n\t\r\n\t&.visible {\r\n        span {\r\n            animation: animBlurZoomIn 1s calc(var(--num) * 0.2s) forwards;\r\n        }\r\n    }\r\n}\r\n\r\n@keyframes animBlurZoomIn {\r\n\t0% {\r\n\t\ttransform: scale(4);\r\n\t\tfilter: blur(4px);\r\n\t\topacity: 0;\r\n\t}\r\n\t20% {\r\n\t\ttransform: scale(1.6);\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\ttransform: scale(1);\r\n\t\tfilter: blur(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n.animDoubleLineSlideIn {\r\n\t.animDoubleLineSlideIn__wrap {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\toverflow: hidden;\r\n\t\t\r\n\t\t&::before,\r\n\t\t&::after {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 4px;\r\n\t\t\tbackground-color: red;\r\n\t\t}\r\n\t\t\r\n\t\t&::before {\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\ttransform: translateX(-100%);\r\n\t\t}\r\n\t\t\r\n\t\t&::after {\r\n\t\t\tbottom: 0;\r\n\t\t\tright: 0;\r\n\t\t\ttransform: translateX(100%);\r\n\t\t}\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.animDoubleLineSlideIn__wrap {\r\n\t\t\t&::before,\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animDoubleLineSlideIn 0.3s 0.5s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t.animDoubleLineSlideIn__content {\r\n\t\t\tanimation: animDoubleLineSlideIn 0.3s 0.7s ease-in-out forwards;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animDoubleLineSlideIn__content {\r\n\ttransform: translateX(-100%);\r\n}\r\n\r\n@keyframes animDoubleLineSlideIn {\r\n\tto {\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow1 {\r\n\t.animAccentUnderlineGrow1__content {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\r\n\t\t&::before,\r\n\t\t&::after {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 50%;\r\n\t\t\tbackground-color: RED;\r\n\t\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t\t\ttransform-origin: 50% 50%;\r\n\t\t}\r\n\t\r\n\t\t&::before {\r\n\t\t\twidth: min(80%, 4em);\r\n\t\t\theight: 1px;\r\n\t\t}\r\n\t\t\r\n\t\t&::after {\r\n\t\t\twidth: min(20%, 1em);\r\n\t\t\theight: 4px;\r\n\t\t}\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow1__content {\r\n\t\t\t&::before,\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow1 0.3s 0.5s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow1 {\r\n\tto {\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\t\r\n}\r\n\r\n.animAccentUnderlineGrow2 {\r\n\t.animAccentUnderlineGrow2__content {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\t\r\n\t\t&::before,\r\n\t\t&::after {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: 0;\r\n\t\t\tbackground-color: RED;\r\n\t\t\ttransform-origin: 0 50%;\r\n\t\t}\r\n\t\t\r\n\t\t&::before {\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 1px;\r\n\t\t\tleft: 0;\r\n\t\t\ttransform: translateY(50%) scaleX(0);\r\n\t\t}\r\n\t\t\r\n\t\t&::after {\r\n\t\t\twidth: min(20%, 1em);\r\n\t\t\theight: 4px;\r\n\t\t\tright: 0;\r\n\t\t\ttransform: translateY(50%);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow2__content {\r\n\t\t\t&::before{\r\n\t\t\t\tanimation: animAccentUnderlineGrow2__long 0.3s 0.5s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow2__short 0.5s 0.8s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow2__long {\r\n\tto{\r\n\t\ttransform: translateY(50%) scaleX(1);\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow2__short {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\tright: 0;\r\n\t\tleft: 100%;\r\n\t}\r\n\t70% {\r\n\t\tleft: 0;\r\n\t}\r\n\t85% {\r\n\t\tleft: 0.5em;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\tleft: 0;\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow3 {\t\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow3__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow3--line 0.3s 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation:animAccentUnderlineGrow3--dot 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow3__content {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\tbackground-color: RED;\r\n\t}\r\n\t\r\n\t&::before {\r\n\t\twidth: min(80%, 4em);\r\n\t\theight: 1px;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t}\r\n\r\n\t&::after {\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tborder-radius: 50%;\r\n\t\ttransform: translate(-50%, 50%);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow3--line {\r\n\tto {\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\t\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow3--dot {\r\n\tto {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow4 {\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow4__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow4--line 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow4--dot 1s 0.3s linear forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow4__content {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n    padding-bottom: 0.5em;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\tbackground-color: RED;\r\n\t}\r\n\t\r\n\t&::before {\r\n\t\twidth: 100%;\r\n\t\theight: 1px;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t\ttransform-origin: 0 50%;\r\n\t}\r\n\r\n\t&::after {\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tleft: 100%;\r\n\t\tborder-radius: 50%;\r\n\t\ttransform: translateY(50%);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow4--line {\r\n\tto {\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow4--dot {\r\n\t0% { opacity: 1; }\r\n\t60% { left: 0; }\r\n\t70% { left: 1.6em; }\r\n\t80% { left: 0.7em; }\r\n\t90% { left: 1.2em; } \r\n\t100% { left: 1em; opacity: 1;}\r\n}\r\n\r\n.animAccentUnderlineGrow5 {\t\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow5__wrap {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow5--left 0.3s 0.3s ease-in-out forwards;\r\n\t\t\t}\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow5--right 0.3s 0.3s ease-in-out forwards;\r\n\t\t\t}\t\r\n\t\t}\r\n\t\t\r\n\t\t.animAccentUnderlineGrow5__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow5--line 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow5__wrap {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: min(20%, 1em);\r\n\t\theight: 4px;\r\n\t\tbottom: 0;\r\n\t\tbackground-color: RED;\r\n\t\topacity: 0;\r\n\t}\r\n\t\r\n\t&::before {\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, 50%);\r\n\t}\r\n\t\r\n\t&::after {\r\n\t\tright: 50%;\r\n\t\ttransform: translate(50%, 50%);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow5__content {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\r\n\t&::before {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 1px;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\tbackground-color: RED;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow5--line {\r\n\tto {\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow5--left {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t70% {\r\n\t\tleft: 0;\r\n\t}\r\n\t80% {\r\n\t\tleft: 0.5em;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\tleft: 0;\r\n\t\ttransform: translate(0, 50%);\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow5--right {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t70% {\r\n\t\tright: 0;\r\n\t}\r\n\t85% {\r\n\t\tright: 0.5em;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\tright: 0;\r\n\t\ttransform: translate(0, 50%);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow6 {\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow6__wrap {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow6--left 0.3s 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow6--right 0.3s 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t.animAccentUnderlineGrow6__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow6--line 0.3s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow6__wrap {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tbackground-color: RED;\r\n\t\tborder-radius: 50%;\r\n\t\topacity: 0;\r\n\t}\r\n\t\r\n\t&:before {\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, 50%);\r\n\t}\r\n\t\r\n\t&::after {\r\n\t\tright: 50%;\r\n\t\ttransform: translate(50%, 50%);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow6__content {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\tpadding-bottom: 0.5em;\r\n\t\r\n\t&::before {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 1px;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t\tbackground-color: RED;\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow6--left {\r\n\t0% { opacity: 1; }\r\n\t60% { left: 0; }\r\n\t70% { left: 1.6em; }\r\n\t80% { left: 0.7em; }\r\n\t90% { left: 1.2em; } \r\n\t100% { left: 1em; opacity: 1;}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow6--right {\r\n\t0% { opacity: 1; }\r\n\t60% { right: 0; }\r\n\t70% { right: 1.6em; }\r\n\t80% { right: 0.7em; }\r\n\t90% { right: 1.2em; } \r\n\t100% { right: 1em; opacity: 1;}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow6--line {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow7 {\t\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow7__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow7--line 0.3s 0.8s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation:animAccentUnderlineGrow7--square 0.3s 0.5s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow7__wrap {\r\n\twidth: fit-content;\r\n}\r\n\r\n.animAccentUnderlineGrow7__content {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\tpadding-bottom: 0.5em;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\tbackground-color: RED;\r\n\t}\r\n\t\r\n\t&::before {\r\n\t\twidth: min(80%, 4em);\r\n\t\theight: 1px;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t}\r\n\r\n\t&::after {\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\ttransform: translate(-50%, 50%) rotate(45deg);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow7--line {\r\n\tto {\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\t\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow7--square {\r\n\tto {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow8 {\r\n\t&.visible {\r\n\t\t.animAccentUnderlineGrow8__wrap {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow8--left 0.3s 0.8s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t&::after {\r\n\t\t\t\tanimation: animAccentUnderlineGrow8--right 0.3s 0.8s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t.animAccentUnderlineGrow8__content {\r\n\t\t\t&::before {\r\n\t\t\t\tanimation: animAccentUnderlineGrow8--line 0.3s 0.5s ease-in-out forwards;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow8__wrap {\r\n\tposition: relative;\r\n\twidth: fit-content;\r\n\t\r\n\t&::before,\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tbackground-color: RED;\r\n\t\topacity: 0;\r\n\t}\r\n\t\r\n\t&:before {\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, 50%) rotate(45deg);\r\n\t}\r\n\t\r\n\t&::after {\r\n\t\tright: 50%;\r\n\t\ttransform: translate(50%, 50%) rotate(-45deg);\r\n\t}\r\n}\r\n\r\n.animAccentUnderlineGrow8__content {\r\n\tposition: relative;\r\n\tpadding-bottom: 0.5em;\r\n\t\r\n\t&::before {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 1px;\r\n\t\tbottom: 0;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, 50%) scaleX(0);\r\n\t\tbackground-color: RED;\r\n\t}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow8--left {\r\n\t0% { opacity: 1; transform: translate(-50%, 50%) rotate(45deg);}\r\n\t60% { left: 0; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.6));}\r\n\t70% { left: 1.6em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.7));}\r\n\t80% { left: 0.7em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.8));}\r\n\t90% { left: 1.2em; transform: translate(-50%, 50%) rotate(calc(45deg + 360deg * 0.9));}\r\n\t100% { left: 1em; opacity: 1; transform: translate(-50%, 50%) rotate(405deg);}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow8--right {\r\n\t0% { opacity: 1; transform: translate(50%, 50%) rotate(-45deg)}\r\n\t60% { right: 0; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.6);}\r\n\t70% { right: 1.6em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.7);}\r\n\t80% { right: 0.7em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.8);}\r\n\t90% { right: 1.2em; transform: translate(50%, 50%) rotate(-45 - 360deg * 0.9);} \r\n\t100% { right: 1em; opacity: 1; transform: translate(50%, 50%) rotate(-405deg);}\r\n}\r\n\r\n@keyframes animAccentUnderlineGrow8--line {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translate(-50%, 50%) scaleX(1);\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}