WordPress.org
Get WordPress

Plugin Directory

Changeset 3329317


Ignore:
Timestamp:
07/17/2025 12:57:31 AM (7 months ago)
Author:
tantive
Message:

ver1.0.11

Location:
tantive-text-effects
Files:
118 added
18 edited

Legend:

Unmodified
Added
Removed

  • tantive-text-effects/trunk/dist/editor-style.css

    r3326117 r3329317  
    1 :root{--tte-borderRoundTrailBorderColor: red}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;overflow:hidden;margin:50px;padding-left:0;padding-right:0}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:red;top:0}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{font-size:100px;transform:translateX(-100%);animation:animSquareSlideInFromLeft__content 5s infinite}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 5s infinite}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}6%{width:100%;left:0;transform:translateX(0)}16%{width:100%;left:0;right:100%}20%{width:0;right:0;left:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}16%{transform:translateX(-100%)}30%{transform:translateX(0)}100%{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animWavyDrop{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyDrop;animation-duration:5s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite;transform:translateY(0)}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(30%)}20%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.block-editor-block-preview__content-iframe .animWavyRise{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animWavyRise .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyRise;animation-duration:5s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite;transform:translateY(0)}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}10%{opacity:1;transform:translateY(-30%)}20%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.block-editor-block-preview__content-iframe .animPopOut{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animPopOut .tteLetter{display:inline-block;margin-right:.25em;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.block-editor-block-preview__content-iframe .animPopOut .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.block-editor-block-preview__content-iframe .animPopOut .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}75%{transform:translate(0, 0);text-shadow:0 0 red}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}100%{transform:translate(0, 0)}}.block-editor-block-preview__content-iframe .animTypeWriter{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animTypeWriter--cursor{animation:animTypeWriter--cursor 1s step-start infinite}@keyframes animTypeWriter--cursor{50%{opacity:0}}.block-editor-block-preview__content-iframe .animLineSwipe{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animLineSwipe::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;animation:animLineSwipeBarSwipe 4.1s infinite}.block-editor-block-preview__content-iframe .animLineSwipe::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;opacity:0;animation:animLineSwipeBorder 4.1s ease-in-out infinite}.block-editor-block-preview__content-iframe .animLineSwipe p{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite}@keyframes animLineSwipeBarSwipe{0%{left:0;opacity:1}24.4%{left:100%;opacity:1}26.8%{left:100%;opacity:0}100%{left:0;opacity:0}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{0%{opacity:0}25%{opacity:0}75%{opacity:1}100%{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}2.4%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}26.8%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.block-editor-block-preview__content-iframe .animGateMark p{font-size:100px;margin-top:50px;margin-bottom:50px;position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 5s ease-in-out infinite}.block-editor-block-preview__content-iframe .animGateMark p::before,.block-editor-block-preview__content-iframe .animGateMark p::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:red;transform:scale(0, 1);animation:animGateMarkGate 5s ease-in-out infinite}.block-editor-block-preview__content-iframe .animGateMark p::before{left:0;transform-origin:0 50%}.block-editor-block-preview__content-iframe .animGateMark p::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{0%{transform:scale(0, 1)}20%{transform:scale(0, 1)}30%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}.block-editor-block-preview__content-iframe .animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap;font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animBorderRoundTrail{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.05s*var(--num)*2 + 1s) ease-in-out forwards}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.05s*var(--num)) ease-out forwards}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.05s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.05s*var(--num)) calc(.05s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.block-editor-block-preview__content-iframe .animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.block-editor-block-preview__content-iframe .animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.block-editor-block-preview__content-iframe .animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.block-editor-block-preview__content-iframe .animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.block-editor-block-preview__content-iframe .animBorderSplitTrail{font-size:75px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s .5s forwards;clip-path:var(--animBorderSplitTrail-b0)}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s .5s forwards;clip-path:var(--animBorderSplitTrail-a0)}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{background-color:red}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.block-editor-block-preview__content-iframe .animLineCurtain{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:red;animation:animLineCurtain--wrap 1s forwards}.block-editor-block-preview__content-iframe .animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.block-editor-block-preview__content-iframe .animFlipCascade{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;display:flex}.block-editor-block-preview__content-iframe .animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.block-editor-block-preview__content-iframe .animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.block-editor-block-preview__content-iframe .animClockReveal .animClockReveal__content{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.block-editor-block-preview__content-iframe .animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:red;transform-origin:50% 0}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__content{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px;width:fit-content;position:relative;z-index:3}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.block-editor-block-preview__content-iframe .animBlurZoomIn{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.block-editor-block-preview__content-iframe .animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s + .5s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn{font-size:75px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:red}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red;transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:3px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:8px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.animAccentUnderlineGrow2{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:red;transform-origin:0 50%}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}
     1:root{--tte-borderRoundTrailBorderColor: red}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;overflow:hidden;margin:50px;padding-left:0;padding-right:0}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:red;top:0}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{font-size:100px;transform:translateX(-100%);animation:animSquareSlideInFromLeft__content 5s infinite}.block-editor-block-preview__content-iframe .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 5s infinite}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}6%{width:100%;left:0;transform:translateX(0)}16%{width:100%;left:0;right:100%}20%{width:0;right:0;left:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}16%{transform:translateX(-100%)}30%{transform:translateX(0)}100%{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animWavyDrop{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyDrop;animation-duration:5s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite;transform:translateY(0)}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(30%)}20%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.block-editor-block-preview__content-iframe .animWavyRise{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animWavyRise .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyRise;animation-duration:5s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite;transform:translateY(0)}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}10%{opacity:1;transform:translateY(-30%)}20%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.block-editor-block-preview__content-iframe .animPopOut{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animPopOut .tteLetter{display:inline-block;margin-right:.25em;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.block-editor-block-preview__content-iframe .animPopOut .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.block-editor-block-preview__content-iframe .animPopOut .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}75%{transform:translate(0, 0);text-shadow:0 0 red}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}100%{transform:translate(0, 0)}}.block-editor-block-preview__content-iframe .animTypeWriter{font-size:100px;margin-left:50px}.block-editor-block-preview__content-iframe .animTypeWriter--cursor{animation:animTypeWriter--cursor 1s step-start infinite}@keyframes animTypeWriter--cursor{50%{opacity:0}}.block-editor-block-preview__content-iframe .animLineSwipe{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animLineSwipe::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;animation:animLineSwipeBarSwipe 4.1s infinite}.block-editor-block-preview__content-iframe .animLineSwipe::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;opacity:0;animation:animLineSwipeBorder 4.1s ease-in-out infinite}.block-editor-block-preview__content-iframe .animLineSwipe p{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite}@keyframes animLineSwipeBarSwipe{0%{left:0;opacity:1}24.4%{left:100%;opacity:1}26.8%{left:100%;opacity:0}100%{left:0;opacity:0}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{0%{opacity:0}25%{opacity:0}75%{opacity:1}100%{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}2.4%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}26.8%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.block-editor-block-preview__content-iframe .animGateMark p{font-size:100px;margin-top:50px;margin-bottom:50px;position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 5s ease-in-out infinite}.block-editor-block-preview__content-iframe .animGateMark p::before,.block-editor-block-preview__content-iframe .animGateMark p::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:red;transform:scale(0, 1);animation:animGateMarkGate 5s ease-in-out infinite}.block-editor-block-preview__content-iframe .animGateMark p::before{left:0;transform-origin:0 50%}.block-editor-block-preview__content-iframe .animGateMark p::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{0%{transform:scale(0, 1)}20%{transform:scale(0, 1)}30%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}.block-editor-block-preview__content-iframe .animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap;font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animBorderRoundTrail{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.05s*var(--num)*2 + 1s) ease-in-out forwards}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.05s*var(--num)) ease-out forwards}.block-editor-block-preview__content-iframe .animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.05s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.05s*var(--num)) calc(.05s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.block-editor-block-preview__content-iframe .animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.block-editor-block-preview__content-iframe .animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.block-editor-block-preview__content-iframe .animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.block-editor-block-preview__content-iframe .animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.block-editor-block-preview__content-iframe .animBorderSplitTrail{font-size:75px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s .5s forwards;clip-path:var(--animBorderSplitTrail-b0)}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s .5s forwards;clip-path:var(--animBorderSplitTrail-a0)}.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.block-editor-block-preview__content-iframe .animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{background-color:red}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.block-editor-block-preview__content-iframe .animLineCurtain{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:red;animation:animLineCurtain--wrap 1s forwards}.block-editor-block-preview__content-iframe .animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.block-editor-block-preview__content-iframe .animFlipCascade{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;display:flex}.block-editor-block-preview__content-iframe .animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.block-editor-block-preview__content-iframe .animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.block-editor-block-preview__content-iframe .animClockReveal .animClockReveal__content{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px;width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.block-editor-block-preview__content-iframe .animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:red;transform-origin:50% 0}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate .animHalfBackgroundRotate__content{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px;width:fit-content;position:relative;z-index:3}.block-editor-block-preview__content-iframe .animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.block-editor-block-preview__content-iframe .animBlurZoomIn{font-size:100px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.block-editor-block-preview__content-iframe .animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s + .5s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn{font-size:75px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:red}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.block-editor-block-preview__content-iframe .animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red;transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:3px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:8px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:red;transform-origin:0 50%}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3{font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::before{animation:animAccentUnderlineGrow3--line .3s .3s ease-in-out forwards}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::after{animation:animAccentUnderlineGrow3--dot .3s ease-in-out forwards}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3__content{position:relative;width:fit-content}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3__content::before{width:min(80%,4em);height:1px;transform:translate(-50%, 50%) scaleX(0)}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow3__content::after{width:10px;height:10px;border-radius:50%;transform:translate(-50%, 50%);opacity:0}@keyframes animAccentUnderlineGrow3--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow3--dot{to{opacity:1}}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::before{animation:animAccentUnderlineGrow4--line .3s ease-in-out forwards}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::after{animation:animAccentUnderlineGrow4--dot 1s .3s linear forwards}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4__content{position:relative;width:fit-content;padding-bottom:.5em;font-size:60px;margin-top:50px;margin-left:50px;margin-bottom:50px}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4__content::before,.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4__content::before{width:100%;height:1px;transform:translate(-50%, 50%) scaleX(0);transform-origin:0 50%}.block-editor-block-preview__content-iframe .animAccentUnderlineGrow4__content::after{width:10px;height:10px;left:100%;border-radius:50%;transform:translateY(50%);opacity:0}@keyframes animAccentUnderlineGrow4--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow4--dot{0%{opacity:1}60%{left:0}70%{left:1.6em}80%{left:.7em}90%{left:1.2em}100%{left:1em;opacity:1}}
    22
    33/*# sourceMappingURL=editor-style.css.map*/

  • tantive-text-effects/trunk/dist/editor-style.css.map

    r3326117 r3329317  
    1 {"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,0CAMZ,0BACI,eACA,gBACA,iBACA,mBAEA,6DACF,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,Q","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}\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\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}"],"names":[],"sourceRoot":""}
     1{"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,yB","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"],"names":[],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/js/animation/index.js

    r3326117 r3329317  
    1 window.addEventListener("DOMContentLoaded",(function(){function e(e,n){var t=e.offsetHeight,r=e.innerHTML;e.innerHTML="";for(var a=[],i=0;i<r.length;i++){var o=document.createElement("span");o.className="tteLetter",o.innerHTML=" "!=r.charAt(i)?r.charAt(i):"&nbsp;",n&&o.style.setProperty(n,i),e.appendChild(o),a.push(o)}e.style.height=t+"px"}[".animSquareSlideInFromLeft",".animWavyDrop",".animWavyRise",".animPopOut",".animTypeWriter",".animLineSwipe",".animGateMark",".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(n){var t=new IntersectionObserver((function(r){r.forEach((function(r){r.isIntersecting&&(n.classList.add("visible"),t.unobserve(r.target),".animTypeWriter"==e&&function(e){var n=e.textContent;e.textContent="";var t=0,r=document.createElement("span");r.textContent="|",r.className="animTypeWriter--cursor",e.appendChild(r),function e(){t<n.length?(r.before(n[t]),t++,setTimeout(e,200)):r.remove()}()}(n))}))}));t.observe(n)}))})),(document.querySelectorAll(".animWavyDrop")||[]).forEach((function(n){e(n,"--animWavyDropDuration")})),(document.querySelectorAll(".animWavyRise")||[]).forEach((function(n){e(n,"--animWavyRiseDuration")})),(document.querySelectorAll(".animDashOneByOne")||[]).forEach((function(n){e(n,"--animDashOneByOneNum")})),(document.querySelectorAll(".animPopOut")||[]).forEach((function(n){e(n,"")})),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(n){e(n,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(n){e(n,"--num")}))}));
     1window.addEventListener("DOMContentLoaded",(function(){function e(e,n){var t=e.offsetHeight,r=e.innerHTML;e.innerHTML="";for(var a=[],i=0;i<r.length;i++){var o=document.createElement("span");o.className="tteLetter",o.innerHTML=" "!=r.charAt(i)?r.charAt(i):"&nbsp;",n&&o.style.setProperty(n,i),e.appendChild(o),a.push(o)}e.style.height=t+"px"}[".animSquareSlideInFromLeft",".animWavyDrop",".animWavyRise",".animPopOut",".animTypeWriter",".animLineSwipe",".animGateMark",".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2",".animAccentUnderlineGrow3",".animAccentUnderlineGrow4"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(n){var t=new IntersectionObserver((function(r){r.forEach((function(r){r.isIntersecting&&(n.classList.add("visible"),t.unobserve(r.target),".animTypeWriter"==e&&function(e){var n=e.textContent;e.textContent="";var t=0,r=document.createElement("span");r.textContent="|",r.className="animTypeWriter--cursor",e.appendChild(r),function e(){t<n.length?(r.before(n[t]),t++,setTimeout(e,200)):r.remove()}()}(n))}))}));t.observe(n)}))})),(document.querySelectorAll(".animWavyDrop")||[]).forEach((function(n){e(n,"--animWavyDropDuration")})),(document.querySelectorAll(".animWavyRise")||[]).forEach((function(n){e(n,"--animWavyRiseDuration")})),(document.querySelectorAll(".animDashOneByOne")||[]).forEach((function(n){e(n,"--animDashOneByOneNum")})),(document.querySelectorAll(".animPopOut")||[]).forEach((function(n){e(n,"")})),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(n){e(n,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(n){e(n,"--num")}))}));
    22//# sourceMappingURL=index.js.map

  • tantive-text-effects/trunk/dist/js/animation/index.js.map

    r3326117 r3329317  
    1 {"version":3,"file":"js/animation/index.js","mappings":"AAAAA,OAAOC,iBAAiB,oBAAoB,WAyCxC,SAASC,EAAaC,EAAMC,GACxB,IAAIC,EAAYF,EAAKG,aAEjBC,EAAUJ,EAAKK,UACnBL,EAAKK,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACrC,IAAIE,EAASC,SAASC,cAAc,QACpCF,EAAOG,UAAY,YACnBH,EAAOJ,UAAiC,KAArBD,EAAQS,OAAON,GAAUH,EAAQS,OAAON,GAAG,SAC3DN,GACCQ,EAAOK,MAAMC,YAAYd,EAAUM,GACvCP,EAAKgB,YAAYP,GACjBH,EAAQW,KAAKR,EACjB,CAEAT,EAAKc,MAAMI,OAAShB,EAAY,IACpC,CAxDkB,CACd,6BACA,gBACA,gBACA,cACA,kBACA,iBACA,gBACA,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,6BAGMiB,SAAQ,SAAAC,GACd,IAAMC,EAAeX,SAASY,iBAAiBF,GAC5CC,EAAab,OAAS,GACrBa,EAAaF,SAAQ,SAAAI,GACjB,IAAMC,EAAW,IAAIC,sBAAqB,SAAAC,GACtCA,EAAQP,SAAQ,SAAAQ,GACTA,EAAMC,iBACLL,EAAIM,UAAUC,IAAI,WAClBN,EAASO,UAAUJ,EAAMK,QACV,mBAAZZ,GA0E3B,SAAwBpB,GACpB,IAAMiC,EAAWjC,EAAKkC,YACtBlC,EAAKkC,YAAc,GAEnB,IAAI3B,EAAI,EACF4B,EAASzB,SAASC,cAAc,QACtCwB,EAAOD,YAAc,IACrBC,EAAOvB,UAAY,yBACnBZ,EAAKgB,YAAYmB,GAEjB,SAASC,IACF7B,EAAI0B,EAASzB,QACZ2B,EAAOE,OAAOJ,EAAS1B,IACvBA,IACA+B,WAAWF,EAAM,MAEjBD,EAAOI,QAEf,CAEAH,EACJ,CA/F0DI,CAAejB,GAEzD,GACJ,IACAC,EAASiB,QAAQlB,EACrB,GAER,KAuB4Bb,SAASY,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAuB,GAC9B3C,EAAa2C,EAAkB,yBACnC,KAQwBhC,SAASY,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAwB,GAC9B5C,EAAa4C,EAAkB,yBACnC,KAO4BjC,SAASY,iBAAiB,sBAE5B,IAAIH,SAAQ,SAAAyB,GAClC7C,EAAa6C,EAAsB,wBACvC,KAOsBlC,SAASY,iBAAiB,gBAE5B,IAAIH,SAAQ,SAAA0B,GAC5B9C,EAAa8C,EAAgB,GACjC,KA8BgCnC,SAASY,iBAAiB,0BAE5B,IAAIH,SAAQ,SAAA2B,GACtC,IAAIC,EAAcD,EAAyBE,cAAc,kCACzDF,EAAyBhC,MAAMC,YAAY,QAAQgC,EAAY1C,UAAUG,OAC7E,KAM2BE,SAASY,iBAAiB,qBAE5B,IAAIH,SAAQ,SAAA8B,GACjClD,EAAakD,EAAqB,QACtC,KAK0BvC,SAASY,iBAAiB,oBAE5B,IAAIH,SAAQ,SAAA+B,GAChCnD,EAAamD,EAAoB,QACrC,GAGR","sources":["webpack://tantive-text-effects/./src/js/animation/index.js"],"sourcesContent":["window.addEventListener('DOMContentLoaded', () => {\r\n\r\n    const animArray = [\r\n        '.animSquareSlideInFromLeft',\r\n        '.animWavyDrop',\r\n        '.animWavyRise',\r\n        '.animPopOut',\r\n        '.animTypeWriter',\r\n        '.animLineSwipe',\r\n        '.animGateMark',\r\n        '.animDashOneByOne',\r\n        '.animBorderRoundTrail',\r\n        '.animBorderSplitTrail',\r\n        '.animLineCurtain',\r\n        '.animFlipCascade',\r\n        '.animClockReveal',\r\n        '.animHalfBackgroundRotate',\r\n        '.animBlurZoomIn',\r\n        '.animDoubleLineSlideIn',\r\n        '.animAccentUnderlineGrow1',\r\n        '.animAccentUnderlineGrow2',\r\n    ];\r\n\r\n    animArray.forEach(animItem => {\r\n        const animatedElms = document.querySelectorAll(animItem);\r\n        if(animatedElms.length > 0){\r\n            animatedElms.forEach(elm => {\r\n                const observer = new IntersectionObserver(entries => {\r\n                    entries.forEach(entry => {\r\n                        if(entry.isIntersecting) {\r\n                            elm.classList.add('visible');\r\n                            observer.unobserve(entry.target);\r\n                            if(animItem == '.animTypeWriter') animTypeWriter(elm);\r\n                        }\r\n                    })\r\n                });\r\n                observer.observe(elm);\r\n            });\r\n        }\r\n    });\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n    \r\n    function animWavyDrop() {\r\n\r\n        let animWavyDropNodes = document.querySelectorAll('.animWavyDrop');\r\n        \r\n        (animWavyDropNodes || []).forEach(animWavyDropNode => {\r\n            splitLetters(animWavyDropNode, '--animWavyDropDuration');\r\n        });\r\n             \r\n    }\r\n      \r\n    animWavyDrop();\r\n\r\n    function animWavyRise() {\r\n\r\n        let animWavyRiseNodes = document.querySelectorAll('.animWavyRise');\r\n        \r\n        (animWavyRiseNodes || []).forEach(animWavyRiseNode => {\r\n            splitLetters(animWavyRiseNode, '--animWavyRiseDuration');\r\n        });\r\n        \r\n    }\r\n\r\n    animWavyRise();\r\n\r\n    function animDashOneByOne () {\r\n        let animDashOneByOneNodes = document.querySelectorAll('.animDashOneByOne');\r\n\r\n        (animDashOneByOneNodes || []).forEach(animDashOneByOneNode => {\r\n            splitLetters(animDashOneByOneNode, '--animDashOneByOneNum')\r\n        });\r\n    }\r\n\r\n    animDashOneByOne();\r\n\r\n    function animPopOut() {\r\n\t\r\n        let animPopOutNodes = document.querySelectorAll('.animPopOut');\r\n        \r\n        (animPopOutNodes || []).forEach(animPopOutNode => {\r\n            splitLetters(animPopOutNode, '');\r\n        });\r\n        \r\n    }    \r\n\r\n    animPopOut();\r\n\r\n    function animTypeWriter(node) {\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n    }\r\n\r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n});\r\n\r\n"],"names":["window","addEventListener","splitLetters","node","duration","nodeHight","offsetHeight","content","innerHTML","letters","i","length","letter","document","createElement","className","charAt","style","setProperty","appendChild","push","height","forEach","animItem","animatedElms","querySelectorAll","elm","observer","IntersectionObserver","entries","entry","isIntersecting","classList","add","unobserve","target","fullText","textContent","cursor","type","before","setTimeout","remove","animTypeWriter","observe","animWavyDropNode","animWavyRiseNode","animDashOneByOneNode","animPopOutNode","animBorderRoundTrailNode","contentNode","querySelector","animFlipCascadeNode","animBlurZoomInNode"],"sourceRoot":""}
     1{"version":3,"file":"js/animation/index.js","mappings":"AAAAA,OAAOC,iBAAiB,oBAAoB,WA2CxC,SAASC,EAAaC,EAAMC,GACxB,IAAIC,EAAYF,EAAKG,aAEjBC,EAAUJ,EAAKK,UACnBL,EAAKK,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACrC,IAAIE,EAASC,SAASC,cAAc,QACpCF,EAAOG,UAAY,YACnBH,EAAOJ,UAAiC,KAArBD,EAAQS,OAAON,GAAUH,EAAQS,OAAON,GAAG,SAC3DN,GACCQ,EAAOK,MAAMC,YAAYd,EAAUM,GACvCP,EAAKgB,YAAYP,GACjBH,EAAQW,KAAKR,EACjB,CAEAT,EAAKc,MAAMI,OAAShB,EAAY,IACpC,CA1DkB,CACd,6BACA,gBACA,gBACA,cACA,kBACA,iBACA,gBACA,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,4BACA,4BACA,6BAGMiB,SAAQ,SAAAC,GACd,IAAMC,EAAeX,SAASY,iBAAiBF,GAC5CC,EAAab,OAAS,GACrBa,EAAaF,SAAQ,SAAAI,GACjB,IAAMC,EAAW,IAAIC,sBAAqB,SAAAC,GACtCA,EAAQP,SAAQ,SAAAQ,GACTA,EAAMC,iBACLL,EAAIM,UAAUC,IAAI,WAClBN,EAASO,UAAUJ,EAAMK,QACV,mBAAZZ,GA0E3B,SAAwBpB,GACpB,IAAMiC,EAAWjC,EAAKkC,YACtBlC,EAAKkC,YAAc,GAEnB,IAAI3B,EAAI,EACF4B,EAASzB,SAASC,cAAc,QACtCwB,EAAOD,YAAc,IACrBC,EAAOvB,UAAY,yBACnBZ,EAAKgB,YAAYmB,GAEjB,SAASC,IACF7B,EAAI0B,EAASzB,QACZ2B,EAAOE,OAAOJ,EAAS1B,IACvBA,IACA+B,WAAWF,EAAM,MAEjBD,EAAOI,QAEf,CAEAH,EACJ,CA/F0DI,CAAejB,GAEzD,GACJ,IACAC,EAASiB,QAAQlB,EACrB,GAER,KAuB4Bb,SAASY,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAuB,GAC9B3C,EAAa2C,EAAkB,yBACnC,KAQwBhC,SAASY,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAwB,GAC9B5C,EAAa4C,EAAkB,yBACnC,KAO4BjC,SAASY,iBAAiB,sBAE5B,IAAIH,SAAQ,SAAAyB,GAClC7C,EAAa6C,EAAsB,wBACvC,KAOsBlC,SAASY,iBAAiB,gBAE5B,IAAIH,SAAQ,SAAA0B,GAC5B9C,EAAa8C,EAAgB,GACjC,KA8BgCnC,SAASY,iBAAiB,0BAE5B,IAAIH,SAAQ,SAAA2B,GACtC,IAAIC,EAAcD,EAAyBE,cAAc,kCACzDF,EAAyBhC,MAAMC,YAAY,QAAQgC,EAAY1C,UAAUG,OAC7E,KAM2BE,SAASY,iBAAiB,qBAE5B,IAAIH,SAAQ,SAAA8B,GACjClD,EAAakD,EAAqB,QACtC,KAK0BvC,SAASY,iBAAiB,oBAE5B,IAAIH,SAAQ,SAAA+B,GAChCnD,EAAamD,EAAoB,QACrC,GAGR","sources":["webpack://tantive-text-effects/./src/js/animation/index.js"],"sourcesContent":["window.addEventListener('DOMContentLoaded', () => {\r\n\r\n    const animArray = [\r\n        '.animSquareSlideInFromLeft',\r\n        '.animWavyDrop',\r\n        '.animWavyRise',\r\n        '.animPopOut',\r\n        '.animTypeWriter',\r\n        '.animLineSwipe',\r\n        '.animGateMark',\r\n        '.animDashOneByOne',\r\n        '.animBorderRoundTrail',\r\n        '.animBorderSplitTrail',\r\n        '.animLineCurtain',\r\n        '.animFlipCascade',\r\n        '.animClockReveal',\r\n        '.animHalfBackgroundRotate',\r\n        '.animBlurZoomIn',\r\n        '.animDoubleLineSlideIn',\r\n        '.animAccentUnderlineGrow1',\r\n        '.animAccentUnderlineGrow2',\r\n        '.animAccentUnderlineGrow3',\r\n        '.animAccentUnderlineGrow4',\r\n    ];\r\n\r\n    animArray.forEach(animItem => {\r\n        const animatedElms = document.querySelectorAll(animItem);\r\n        if(animatedElms.length > 0){\r\n            animatedElms.forEach(elm => {\r\n                const observer = new IntersectionObserver(entries => {\r\n                    entries.forEach(entry => {\r\n                        if(entry.isIntersecting) {\r\n                            elm.classList.add('visible');\r\n                            observer.unobserve(entry.target);\r\n                            if(animItem == '.animTypeWriter') animTypeWriter(elm);\r\n                        }\r\n                    })\r\n                });\r\n                observer.observe(elm);\r\n            });\r\n        }\r\n    });\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n    \r\n    function animWavyDrop() {\r\n\r\n        let animWavyDropNodes = document.querySelectorAll('.animWavyDrop');\r\n        \r\n        (animWavyDropNodes || []).forEach(animWavyDropNode => {\r\n            splitLetters(animWavyDropNode, '--animWavyDropDuration');\r\n        });\r\n             \r\n    }\r\n      \r\n    animWavyDrop();\r\n\r\n    function animWavyRise() {\r\n\r\n        let animWavyRiseNodes = document.querySelectorAll('.animWavyRise');\r\n        \r\n        (animWavyRiseNodes || []).forEach(animWavyRiseNode => {\r\n            splitLetters(animWavyRiseNode, '--animWavyRiseDuration');\r\n        });\r\n        \r\n    }\r\n\r\n    animWavyRise();\r\n\r\n    function animDashOneByOne () {\r\n        let animDashOneByOneNodes = document.querySelectorAll('.animDashOneByOne');\r\n\r\n        (animDashOneByOneNodes || []).forEach(animDashOneByOneNode => {\r\n            splitLetters(animDashOneByOneNode, '--animDashOneByOneNum')\r\n        });\r\n    }\r\n\r\n    animDashOneByOne();\r\n\r\n    function animPopOut() {\r\n\t\r\n        let animPopOutNodes = document.querySelectorAll('.animPopOut');\r\n        \r\n        (animPopOutNodes || []).forEach(animPopOutNode => {\r\n            splitLetters(animPopOutNode, '');\r\n        });\r\n        \r\n    }    \r\n\r\n    animPopOut();\r\n\r\n    function animTypeWriter(node) {\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n    }\r\n\r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n});\r\n\r\n"],"names":["window","addEventListener","splitLetters","node","duration","nodeHight","offsetHeight","content","innerHTML","letters","i","length","letter","document","createElement","className","charAt","style","setProperty","appendChild","push","height","forEach","animItem","animatedElms","querySelectorAll","elm","observer","IntersectionObserver","entries","entry","isIntersecting","classList","add","unobserve","target","fullText","textContent","cursor","type","before","setTimeout","remove","animTypeWriter","observe","animWavyDropNode","animWavyRiseNode","animDashOneByOneNode","animPopOutNode","animBorderRoundTrailNode","contentNode","querySelector","animFlipCascadeNode","animBlurZoomInNode"],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/js/editor/index.js

    r3326117 r3329317  
    1 window.addEventListener("load",(function(){function e(e,n){var t=e.offsetHeight,o=e.innerHTML;e.innerHTML="";for(var r=[],a=0;a<o.length;a++){var i=document.createElement("span");i.className="tteLetter",i.innerHTML=" "!=o.charAt(a)?o.charAt(a):"&nbsp;",n&&i.style.setProperty(n,a),e.appendChild(i),r.push(i)}e.style.height=t+"px"}document.querySelector("html").classList.contains("block-editor-block-preview__content-iframe")&&(setInterval((function(){[".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(e){e.classList.add("visible"),setTimeout((function(){e.classList.remove("visible")}),4e3)}))}))}),5e3),(document.querySelectorAll(".animWavyDrop")||[]).forEach((function(n){e(n,"--animWavyDropDuration")})),(document.querySelectorAll(".animWavyRise")||[]).forEach((function(n){e(n,"--animWavyRiseDuration")})),(document.querySelectorAll(".animPopOut")||[]).forEach((function(n){e(n,"")})),(document.querySelectorAll(".animDashOneByOne")||[]).forEach((function(n){e(n,"--animDashOneByOneNum")})),document.querySelectorAll(".block-editor-block-preview__content-iframe .animTypeWriter").forEach((function(e){setInterval((function(){!function(e){var n=e.textContent;e.textContent="";var t=0,o=document.createElement("span");o.textContent="|",o.className="animTypeWriter--cursor",e.appendChild(o),function e(){t<n.length?(o.before(n[t]),t++,setTimeout(e,200)):o.remove()}()}(e)}),5e3)})),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(n){e(n,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(n){e(n,"--num")})))}));
     1window.addEventListener("load",(function(){function e(e,n){var t=e.offsetHeight,o=e.innerHTML;e.innerHTML="";for(var r=[],i=0;i<o.length;i++){var a=document.createElement("span");a.className="tteLetter",a.innerHTML=" "!=o.charAt(i)?o.charAt(i):"&nbsp;",n&&a.style.setProperty(n,i),e.appendChild(a),r.push(a)}e.style.height=t+"px"}document.querySelector("html").classList.contains("block-editor-block-preview__content-iframe")&&(setInterval((function(){[".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2",".animAccentUnderlineGrow3",".animAccentUnderlineGrow4"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(e){e.classList.add("visible"),setTimeout((function(){e.classList.remove("visible")}),4e3)}))}))}),5e3),(document.querySelectorAll(".animWavyDrop")||[]).forEach((function(n){e(n,"--animWavyDropDuration")})),(document.querySelectorAll(".animWavyRise")||[]).forEach((function(n){e(n,"--animWavyRiseDuration")})),(document.querySelectorAll(".animPopOut")||[]).forEach((function(n){e(n,"")})),(document.querySelectorAll(".animDashOneByOne")||[]).forEach((function(n){e(n,"--animDashOneByOneNum")})),document.querySelectorAll(".block-editor-block-preview__content-iframe .animTypeWriter").forEach((function(e){setInterval((function(){!function(e){var n=e.textContent;e.textContent="";var t=0,o=document.createElement("span");o.textContent="|",o.className="animTypeWriter--cursor",e.appendChild(o),function e(){t<n.length?(o.before(n[t]),t++,setTimeout(e,200)):o.remove()}()}(e)}),5e3)})),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(n){e(n,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(n){e(n,"--num")})))}));
    22//# sourceMappingURL=index.js.map

  • tantive-text-effects/trunk/dist/js/editor/index.js.map

    r3326117 r3329317  
    1 {"version":3,"file":"js/editor/index.js","mappings":"AAAAA,OAAOC,iBAAiB,QAAQ,WAM5B,SAASC,EAAaC,EAAMC,GACxB,IAAIC,EAAYF,EAAKG,aAEjBC,EAAUJ,EAAKK,UACnBL,EAAKK,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACrC,IAAIE,EAASC,SAASC,cAAc,QACpCF,EAAOG,UAAY,YACnBH,EAAOJ,UAAiC,KAArBD,EAAQS,OAAON,GAAUH,EAAQS,OAAON,GAAG,SAC3DN,GACCQ,EAAOK,MAAMC,YAAYd,EAAUM,GACvCP,EAAKgB,YAAYP,GACjBH,EAAQW,KAAKR,EACjB,CAEAT,EAAKc,MAAMI,OAAShB,EAAY,IACpC,CArBIQ,SAASS,cAAc,QAAQC,UAAUC,SAAS,gDAuBtDC,aAAY,WACU,CACd,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,6BAGMC,SAAQ,SAAAC,GACd,IAAMC,EAAef,SAASgB,iBAAiBF,GAC5CC,EAAajB,OAAS,GACrBiB,EAAaF,SAAQ,SAAAI,GACjBA,EAAYP,UAAUQ,IAAI,WAC1BC,YAAW,WACPF,EAAYP,UAAUU,OAAO,UACjC,GAAG,IACP,GAER,GAEJ,GAAG,MAKyBpB,SAASgB,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAQ,GAC9BhC,EAAagC,EAAkB,yBACnC,KAQwBrB,SAASgB,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAS,GAC9BjC,EAAaiC,EAAkB,yBACnC,KAQsBtB,SAASgB,iBAAiB,gBAE5B,IAAIH,SAAQ,SAAAU,GAC5BlC,EAAakC,EAAgB,GACjC,KAO4BvB,SAASgB,iBAAiB,sBAE5B,IAAIH,SAAQ,SAAAW,GAClCnC,EAAamC,EAAsB,wBACvC,IA4BsBxB,SAASgB,iBAAiB,+DAChCH,SAAQ,SAAAY,GACxBb,aAAY,YAzBhB,SAAwBtB,GACpB,IAAMoC,EAAWpC,EAAKqC,YACtBrC,EAAKqC,YAAc,GAEnB,IAAI9B,EAAI,EACF+B,EAAS5B,SAASC,cAAc,QACtC2B,EAAOD,YAAc,IACrBC,EAAO1B,UAAY,yBACnBZ,EAAKgB,YAAYsB,GAEjB,SAASC,IACFhC,EAAI6B,EAAS5B,QACZ8B,EAAOE,OAAOJ,EAAS7B,IACvBA,IACAsB,WAAWU,EAAM,MAEjBD,EAAOR,QAEf,CAEAS,EACJ,CAKQE,CAAeN,EACnB,GAAG,IACP,KAGoCzB,SAASgB,iBAAiB,0BAE5B,IAAIH,SAAQ,SAAAmB,GACtC,IAAIC,EAAcD,EAAyBvB,cAAc,kCACzDuB,EAAyB5B,MAAMC,YAAY,QAAQ4B,EAAYtC,UAAUG,OAC7E,KAM2BE,SAASgB,iBAAiB,qBAE5B,IAAIH,SAAQ,SAAAqB,GACjC7C,EAAa6C,EAAqB,QACtC,KAK0BlC,SAASgB,iBAAiB,oBAE5B,IAAIH,SAAQ,SAAAsB,GAChC9C,EAAa8C,EAAoB,QACrC,IAIR","sources":["webpack://tantive-text-effects/./src/js/editor/index.js"],"sourcesContent":["window.addEventListener('load', () => {\r\n    \r\n    if(!document.querySelector('html').classList.contains('block-editor-block-preview__content-iframe')) {\r\n        return;\r\n    }\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n    \r\n    setInterval(() => {\r\n        const animArray = [\r\n            '.animDashOneByOne',\r\n            '.animBorderRoundTrail',\r\n            '.animBorderSplitTrail',\r\n            '.animLineCurtain',\r\n            '.animFlipCascade',\r\n            '.animClockReveal',\r\n            '.animHalfBackgroundRotate',\r\n            '.animBlurZoomIn',\r\n            '.animDoubleLineSlideIn',\r\n            '.animAccentUnderlineGrow1',\r\n            '.animAccentUnderlineGrow2',\r\n        ];\r\n            \r\n        animArray.forEach(animItem => {\r\n            const animatedElms = document.querySelectorAll(animItem);\r\n            if(animatedElms.length > 0) {\r\n                animatedElms.forEach(animatedElm => {\r\n                    animatedElm.classList.add('visible');\r\n                    setTimeout(() => {\r\n                        animatedElm.classList.remove('visible');\r\n                    }, 4000);\r\n                });\r\n            }\r\n        });\r\n\r\n    }, 5000);\r\n\r\n\r\n    function animWavyDrop() {\r\n\r\n        let animWavyDropNodes = document.querySelectorAll('.animWavyDrop');\r\n        \r\n        (animWavyDropNodes || []).forEach(animWavyDropNode => {\r\n            splitLetters(animWavyDropNode, '--animWavyDropDuration');\r\n        });\r\n             \r\n    }\r\n      \r\n    animWavyDrop();\r\n\r\n    function animWavyRise() {\r\n\r\n        let animWavyRiseNodes = document.querySelectorAll('.animWavyRise');\r\n        \r\n        (animWavyRiseNodes || []).forEach(animWavyRiseNode => {\r\n            splitLetters(animWavyRiseNode, '--animWavyRiseDuration');\r\n        });\r\n        \r\n    }\r\n\r\n    animWavyRise();\r\n\r\n    function animPopOut() {\r\n\t\r\n        let animPopOutNodes = document.querySelectorAll('.animPopOut');\r\n        \r\n        (animPopOutNodes || []).forEach(animPopOutNode => {\r\n            splitLetters(animPopOutNode, '');\r\n        });\r\n        \r\n    }    \r\n\r\n    animPopOut();\r\n\r\n    function animDashOneByOne () {\r\n        let animDashOneByOneNodes = document.querySelectorAll('.animDashOneByOne');\r\n\r\n        (animDashOneByOneNodes || []).forEach(animDashOneByOneNode => {\r\n            splitLetters(animDashOneByOneNode, '--animDashOneByOneNum')\r\n        });\r\n    }\r\n\r\n    animDashOneByOne();\r\n\r\n    function animTypeWriter(node) {\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n    }\r\n\r\n    let animTypeWriterNodes = document.querySelectorAll('.block-editor-block-preview__content-iframe .animTypeWriter');\r\n    animTypeWriterNodes.forEach(animTypeWriterNode => {\r\n        setInterval(()=>{\r\n            animTypeWriter(animTypeWriterNode);\r\n        }, 5000);\r\n    });\r\n    \r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n\r\n});\r\n\r\n"],"names":["window","addEventListener","splitLetters","node","duration","nodeHight","offsetHeight","content","innerHTML","letters","i","length","letter","document","createElement","className","charAt","style","setProperty","appendChild","push","height","querySelector","classList","contains","setInterval","forEach","animItem","animatedElms","querySelectorAll","animatedElm","add","setTimeout","remove","animWavyDropNode","animWavyRiseNode","animPopOutNode","animDashOneByOneNode","animTypeWriterNode","fullText","textContent","cursor","type","before","animTypeWriter","animBorderRoundTrailNode","contentNode","animFlipCascadeNode","animBlurZoomInNode"],"sourceRoot":""}
     1{"version":3,"file":"js/editor/index.js","mappings":"AAAAA,OAAOC,iBAAiB,QAAQ,WAM5B,SAASC,EAAaC,EAAMC,GACxB,IAAIC,EAAYF,EAAKG,aAEjBC,EAAUJ,EAAKK,UACnBL,EAAKK,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACrC,IAAIE,EAASC,SAASC,cAAc,QACpCF,EAAOG,UAAY,YACnBH,EAAOJ,UAAiC,KAArBD,EAAQS,OAAON,GAAUH,EAAQS,OAAON,GAAG,SAC3DN,GACCQ,EAAOK,MAAMC,YAAYd,EAAUM,GACvCP,EAAKgB,YAAYP,GACjBH,EAAQW,KAAKR,EACjB,CAEAT,EAAKc,MAAMI,OAAShB,EAAY,IACpC,CArBIQ,SAASS,cAAc,QAAQC,UAAUC,SAAS,gDAuBtDC,aAAY,WACU,CACd,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,4BACA,4BACA,6BAGMC,SAAQ,SAAAC,GACd,IAAMC,EAAef,SAASgB,iBAAiBF,GAC5CC,EAAajB,OAAS,GACrBiB,EAAaF,SAAQ,SAAAI,GACjBA,EAAYP,UAAUQ,IAAI,WAC1BC,YAAW,WACPF,EAAYP,UAAUU,OAAO,UACjC,GAAG,IACP,GAER,GAEJ,GAAG,MAKyBpB,SAASgB,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAQ,GAC9BhC,EAAagC,EAAkB,yBACnC,KAQwBrB,SAASgB,iBAAiB,kBAE5B,IAAIH,SAAQ,SAAAS,GAC9BjC,EAAaiC,EAAkB,yBACnC,KAQsBtB,SAASgB,iBAAiB,gBAE5B,IAAIH,SAAQ,SAAAU,GAC5BlC,EAAakC,EAAgB,GACjC,KAO4BvB,SAASgB,iBAAiB,sBAE5B,IAAIH,SAAQ,SAAAW,GAClCnC,EAAamC,EAAsB,wBACvC,IA4BsBxB,SAASgB,iBAAiB,+DAChCH,SAAQ,SAAAY,GACxBb,aAAY,YAzBhB,SAAwBtB,GACpB,IAAMoC,EAAWpC,EAAKqC,YACtBrC,EAAKqC,YAAc,GAEnB,IAAI9B,EAAI,EACF+B,EAAS5B,SAASC,cAAc,QACtC2B,EAAOD,YAAc,IACrBC,EAAO1B,UAAY,yBACnBZ,EAAKgB,YAAYsB,GAEjB,SAASC,IACFhC,EAAI6B,EAAS5B,QACZ8B,EAAOE,OAAOJ,EAAS7B,IACvBA,IACAsB,WAAWU,EAAM,MAEjBD,EAAOR,QAEf,CAEAS,EACJ,CAKQE,CAAeN,EACnB,GAAG,IACP,KAGoCzB,SAASgB,iBAAiB,0BAE5B,IAAIH,SAAQ,SAAAmB,GACtC,IAAIC,EAAcD,EAAyBvB,cAAc,kCACzDuB,EAAyB5B,MAAMC,YAAY,QAAQ4B,EAAYtC,UAAUG,OAC7E,KAM2BE,SAASgB,iBAAiB,qBAE5B,IAAIH,SAAQ,SAAAqB,GACjC7C,EAAa6C,EAAqB,QACtC,KAK0BlC,SAASgB,iBAAiB,oBAE5B,IAAIH,SAAQ,SAAAsB,GAChC9C,EAAa8C,EAAoB,QACrC,IAIR","sources":["webpack://tantive-text-effects/./src/js/editor/index.js"],"sourcesContent":["window.addEventListener('load', () => {\r\n    \r\n    if(!document.querySelector('html').classList.contains('block-editor-block-preview__content-iframe')) {\r\n        return;\r\n    }\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n    \r\n    setInterval(() => {\r\n        const animArray = [\r\n            '.animDashOneByOne',\r\n            '.animBorderRoundTrail',\r\n            '.animBorderSplitTrail',\r\n            '.animLineCurtain',\r\n            '.animFlipCascade',\r\n            '.animClockReveal',\r\n            '.animHalfBackgroundRotate',\r\n            '.animBlurZoomIn',\r\n            '.animDoubleLineSlideIn',\r\n            '.animAccentUnderlineGrow1',\r\n            '.animAccentUnderlineGrow2',\r\n            '.animAccentUnderlineGrow3',\r\n            '.animAccentUnderlineGrow4',\r\n        ];\r\n            \r\n        animArray.forEach(animItem => {\r\n            const animatedElms = document.querySelectorAll(animItem);\r\n            if(animatedElms.length > 0) {\r\n                animatedElms.forEach(animatedElm => {\r\n                    animatedElm.classList.add('visible');\r\n                    setTimeout(() => {\r\n                        animatedElm.classList.remove('visible');\r\n                    }, 4000);\r\n                });\r\n            }\r\n        });\r\n\r\n    }, 5000);\r\n\r\n\r\n    function animWavyDrop() {\r\n\r\n        let animWavyDropNodes = document.querySelectorAll('.animWavyDrop');\r\n        \r\n        (animWavyDropNodes || []).forEach(animWavyDropNode => {\r\n            splitLetters(animWavyDropNode, '--animWavyDropDuration');\r\n        });\r\n             \r\n    }\r\n      \r\n    animWavyDrop();\r\n\r\n    function animWavyRise() {\r\n\r\n        let animWavyRiseNodes = document.querySelectorAll('.animWavyRise');\r\n        \r\n        (animWavyRiseNodes || []).forEach(animWavyRiseNode => {\r\n            splitLetters(animWavyRiseNode, '--animWavyRiseDuration');\r\n        });\r\n        \r\n    }\r\n\r\n    animWavyRise();\r\n\r\n    function animPopOut() {\r\n\t\r\n        let animPopOutNodes = document.querySelectorAll('.animPopOut');\r\n        \r\n        (animPopOutNodes || []).forEach(animPopOutNode => {\r\n            splitLetters(animPopOutNode, '');\r\n        });\r\n        \r\n    }    \r\n\r\n    animPopOut();\r\n\r\n    function animDashOneByOne () {\r\n        let animDashOneByOneNodes = document.querySelectorAll('.animDashOneByOne');\r\n\r\n        (animDashOneByOneNodes || []).forEach(animDashOneByOneNode => {\r\n            splitLetters(animDashOneByOneNode, '--animDashOneByOneNum')\r\n        });\r\n    }\r\n\r\n    animDashOneByOne();\r\n\r\n    function animTypeWriter(node) {\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n    }\r\n\r\n    let animTypeWriterNodes = document.querySelectorAll('.block-editor-block-preview__content-iframe .animTypeWriter');\r\n    animTypeWriterNodes.forEach(animTypeWriterNode => {\r\n        setInterval(()=>{\r\n            animTypeWriter(animTypeWriterNode);\r\n        }, 5000);\r\n    });\r\n    \r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n\r\n});\r\n\r\n"],"names":["window","addEventListener","splitLetters","node","duration","nodeHight","offsetHeight","content","innerHTML","letters","i","length","letter","document","createElement","className","charAt","style","setProperty","appendChild","push","height","querySelector","classList","contains","setInterval","forEach","animItem","animatedElms","querySelectorAll","animatedElm","add","setTimeout","remove","animWavyDropNode","animWavyRiseNode","animPopOutNode","animDashOneByOneNode","animTypeWriterNode","fullText","textContent","cursor","type","before","animTypeWriter","animBorderRoundTrailNode","contentNode","animFlipCascadeNode","animBlurZoomInNode"],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/js/menu/menu.js

    r3326117 r3329317  
    1 (()=>{"use strict";var e=function(){var e={};e.overall=r(),e.squareSlideInFromLeft=t(),e.popOut=o(),e.lineSwipe=n(),e.gateMark=l(),e.borderRoundTrail=u(),e.borderSplitTrailT2B=i(),e.borderSplitTrailB2T=a(),e.borderSplitTrailL2R=d(),e.borderSplitTrailR2L=c(),e.lineCurtain=S(),e.halfBackgroundRotate=s(),e.doubleLineSlideIn=C(),e.accentUnderlineGrow1=v(),e.accentUnderlineGrow2=f(),g(e)},r=function(){var e=document.querySelector(".overallSettings .defaultColor"),r={};return r.defaultColor=e.value,r},t=function(){var e=document.querySelector(".tteSettingsContents-squareSlideInFromLeft .squareColor"),r={};return r.rectangleColor=e.value,r},o=function(){var e=document.querySelector(".tteSettingsContents-PopOut .shadowColor"),r={};return r.shadowColor=e.value,r},n=function(){var e=document.querySelector(".tteSettingsContents-lineSwipe .lineSwipeBorderColor"),r={};return r.borderColor=e.value,r},l=function(){var e=document.querySelector(".tteSettingsContents-gateMark .gateMarkGateColor"),r={};return r.gateColor=e.value,r},u=function(){var e=document.querySelector(".tteSettingsContents-borderRoundTrail .borderRoundTrailBorderColor"),r={};return r.borderColor=e.value,r},i=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailT2B .borderSplitTrailT2BBorderColor"),r={};return r.borderColor=e.value,r},a=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailB2T .borderSplitTrailB2TBorderColor"),r={};return r.borderColor=e.value,r},d=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailL2R .borderSplitTrailL2RBorderColor"),r={};return r.borderColor=e.value,r},c=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailR2L .borderSplitTrailR2LBorderColor"),r={};return r.borderColor=e.value,r},S=function(){var e=document.querySelector(".tteSettingsContents-lineCurtain .lineCurtainLineColor"),r={};return r.lineColor=e.value,r},s=function(){var e=document.querySelector(".tteSettingsContents-halfBackgroundRotate .halfBackgroundRotateBackgroundColor"),r={};return r.backgroundColor=e.value,r},C=function(){var e=document.querySelector(".tteSettingsContents-doubleLineSlideIn .doubleLineSlideInLineColor"),r={};return r.underlineColor=e.value,r},v=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow1 .underlineColor"),r={};return r.underlineColor=e.value,r},f=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow2 .underlineColor"),r={};return r.underlineColor=e.value,r},g=function(e){wp.apiFetch({path:"tantive-text-effects/v1/save-settings",method:"POST",body:JSON.stringify(e)}).then((function(e){alert(e.message)})).catch((function(e){console.error("Error fetching settings:",e)}))};window.addEventListener("load",(function(){document.querySelectorAll(".tteSaveButton").forEach((function(r){r.addEventListener("click",e)}))}))})();
     1(()=>{"use strict";var e=function(){var e={};e.overall=r(),e.squareSlideInFromLeft=t(),e.popOut=n(),e.lineSwipe=o(),e.gateMark=l(),e.borderRoundTrail=u(),e.borderSplitTrailT2B=i(),e.borderSplitTrailB2T=a(),e.borderSplitTrailL2R=c(),e.borderSplitTrailR2L=d(),e.lineCurtain=S(),e.halfBackgroundRotate=C(),e.doubleLineSlideIn=s(),e.accentUnderlineGrow1=v(),e.accentUnderlineGrow2=f(),e.accentUnderlineGrow3=g(),e.accentUnderlineGrow4=b(),m(e)},r=function(){var e=document.querySelector(".overallSettings .defaultColor"),r={};return r.defaultColor=e.value,r},t=function(){var e=document.querySelector(".tteSettingsContents-squareSlideInFromLeft .squareColor"),r={};return r.rectangleColor=e.value,r},n=function(){var e=document.querySelector(".tteSettingsContents-PopOut .shadowColor"),r={};return r.shadowColor=e.value,r},o=function(){var e=document.querySelector(".tteSettingsContents-lineSwipe .lineSwipeBorderColor"),r={};return r.borderColor=e.value,r},l=function(){var e=document.querySelector(".tteSettingsContents-gateMark .gateMarkGateColor"),r={};return r.gateColor=e.value,r},u=function(){var e=document.querySelector(".tteSettingsContents-borderRoundTrail .borderRoundTrailBorderColor"),r={};return r.borderColor=e.value,r},i=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailT2B .borderSplitTrailT2BBorderColor"),r={};return r.borderColor=e.value,r},a=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailB2T .borderSplitTrailB2TBorderColor"),r={};return r.borderColor=e.value,r},c=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailL2R .borderSplitTrailL2RBorderColor"),r={};return r.borderColor=e.value,r},d=function(){var e=document.querySelector(".tteSettingsContents-borderSplitTrailR2L .borderSplitTrailR2LBorderColor"),r={};return r.borderColor=e.value,r},S=function(){var e=document.querySelector(".tteSettingsContents-lineCurtain .lineCurtainLineColor"),r={};return r.lineColor=e.value,r},C=function(){var e=document.querySelector(".tteSettingsContents-halfBackgroundRotate .halfBackgroundRotateBackgroundColor"),r={};return r.backgroundColor=e.value,r},s=function(){var e=document.querySelector(".tteSettingsContents-doubleLineSlideIn .doubleLineSlideInLineColor"),r={};return r.underlineColor=e.value,r},v=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow1 .underlineColor"),r={};return r.underlineColor=e.value,r},f=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow2 .underlineColor"),r={};return r.underlineColor=e.value,r},g=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow3 .underlineColor"),r={};return r.underlineColor=e.value,r},b=function(){var e=document.querySelector(".tteSettingsContents-accentUnderlineGrow4 .underlineColor"),r={};return r.underlineColor=e.value,r},m=function(e){wp.apiFetch({path:"tantive-text-effects/v1/save-settings",method:"POST",body:JSON.stringify(e)}).then((function(e){alert(e.message)})).catch((function(e){console.error("Error fetching settings:",e)}))};window.addEventListener("load",(function(){document.querySelectorAll(".tteSaveButton").forEach((function(r){r.addEventListener("click",e)}))}))})();
    22//# sourceMappingURL=menu.js.map

  • tantive-text-effects/trunk/dist/js/menu/menu.js.map

    r3326117 r3329317  
    1 {"version":3,"file":"js/menu/menu.js","mappings":"mBAEA,IASaA,EAAT,WACI,IAAIC,EAAW,CAAC,EAEhBA,EAAkB,QAAIC,IACtBD,EAAgC,sBAAIE,IACpCF,EAAiB,OAAIG,IACrBH,EAAoB,UAAII,IACxBJ,EAAmB,SAAIK,IACvBL,EAA2B,iBAAIM,IAC/BN,EAA8B,oBAAIO,IAClCP,EAA8B,oBAAIQ,IAClCR,EAA8B,oBAAIS,IAClCT,EAA8B,oBAAIU,IAClCV,EAAsB,YAAIW,IAC1BX,EAA+B,qBAAIY,IACnCZ,EAA4B,kBAAIa,IAChCb,EAA+B,qBAAIc,IACnCd,EAA+B,qBAAIe,IAEnCC,EAAchB,EAClB,EAESC,EAAT,WACI,IAAMgB,EAAsBC,SAASC,cAAc,kCAC/CC,EAAM,CAAC,EAIX,OAFAA,EAAkB,aAAIH,EAAoBI,MAEnCD,CACX,EAESlB,EAAT,WACI,IAAMoB,EAAsCJ,SAASC,cAAc,2DAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIE,EAAoCD,MAErDD,CACX,EAESjB,EAAT,WACI,IAAMoB,EAAoBL,SAASC,cAAc,4CAC7CC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIG,EAAkBF,MAEhCD,CACX,EAEShB,EAAT,WACI,IAAMoB,EAAuBN,SAASC,cAAc,wDAChDC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAII,EAAqBH,MAEnCD,CACX,EAESf,EAAT,WACI,IAAMoB,EAAoBP,SAASC,cAAc,oDAC7CC,EAAM,CAAC,EAIX,OAFAA,EAAe,UAAIK,EAAkBJ,MAE9BD,CACX,EAESd,EAAT,WACI,IAAMoB,EAA8BR,SAASC,cAAc,sEACvDC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIM,EAA4BL,MAE1CD,CACX,EAESb,EAAT,WACI,IAAMoB,EAAiCT,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIO,EAA+BN,MAE7CD,CACX,EAESZ,EAAT,WACI,IAAMoB,EAAiCV,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIQ,EAA+BP,MAE7CD,CACX,EAESX,EAAT,WACI,IAAMoB,EAAiCX,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIS,EAA+BR,MAE7CD,CACX,EAESV,EAAT,WACI,IAAMoB,EAAiCZ,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIU,EAA+BT,MAE7CD,CACX,EAEST,EAAT,WACI,IAAMoB,EAAuBb,SAASC,cAAc,0DAChDC,EAAM,CAAC,EAIX,OAFAA,EAAe,UAAIW,EAAqBV,MAEjCD,CACX,EAESR,EAAT,WACI,IAAMoB,EAAsCd,SAASC,cAAc,kFAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAqB,gBAAIY,EAAoCX,MAEtDD,CACX,EAESP,EAAT,WACI,IAAMoB,EAA6Bf,SAASC,cAAc,sEACtDC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIa,EAA2BZ,MAE5CD,CACX,EAESN,EAAT,WACI,IAAMoB,EAAqChB,SAASC,cAAc,6DAC9DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIc,EAAmCb,MAEpDD,CACX,EAESL,EAAT,WACI,IAAMoB,EAAqCjB,SAASC,cAAc,6DAC9DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIe,EAAmCd,MAEpDD,CACX,EAESJ,EAAT,SAAuBhB,GACnBoC,GAAGC,SAAS,CACRC,KAAM,wCACNC,OAAQ,OACRC,KAAMC,KAAKC,UAAU1C,KAExB2C,MAAK,SAACC,GACHC,MAAMD,EAAkB,QAC5B,IAAE,OACK,SAACE,GACJC,QAAQD,MAAM,2BAA4BA,EAC9C,GACJ,EAjLAE,OAAOC,iBAAiB,QAAQ,WACJ/B,SAASgC,iBAAiB,kBAClCC,SAAQ,SAAAC,GACpBA,EAAeH,iBAAiB,QAASlD,EAC7C,GACJ,G","sources":["webpack://tantive-text-effects/./src/js/menu/menu.js"],"sourcesContent":["\"use strict\";\r\n\r\n{\r\n    window.addEventListener('load', () => {\r\n        const saveButtonNodes = document.querySelectorAll('.tteSaveButton');\r\n        saveButtonNodes.forEach(saveButtonNode => {\r\n            saveButtonNode.addEventListener('click', saveButtonClicked);\r\n        });\r\n    });\r\n\r\n    \r\n    function saveButtonClicked() {\r\n        let saveData = {};\r\n\r\n        saveData['overall'] = getOverallSettings();\r\n        saveData['squareSlideInFromLeft'] = getSquareSlideInFromLeftSettings();\r\n        saveData['popOut'] = getPopOutSettings();\r\n        saveData['lineSwipe'] = getLineSwipeSettings();\r\n        saveData['gateMark'] = getGateMarkSettings();\r\n        saveData['borderRoundTrail'] = getBorderRoundTrailSettings();\r\n        saveData['borderSplitTrailT2B'] = getBorderSplitTrailT2BSettings();\r\n        saveData['borderSplitTrailB2T'] = getBorderSplitTrailB2TSettings();\r\n        saveData['borderSplitTrailL2R'] = getBorderSplitTrailL2RSettings();\r\n        saveData['borderSplitTrailR2L'] = getBorderSplitTrailR2LSettings();\r\n        saveData['lineCurtain'] = getLineCurtainSettings();\r\n        saveData['halfBackgroundRotate'] = getHalfBackgroundRotateSettings();\r\n        saveData['doubleLineSlideIn'] = getDoubleLineSlideInSettings();\r\n        saveData['accentUnderlineGrow1'] = getAccentUnderlineGrow1Settings();\r\n        saveData['accentUnderlineGrow2'] = getAccentUnderlineGrow2Settings();\r\n\r\n        fetchSaveData(saveData);\r\n    }\r\n\r\n    function getOverallSettings() {\r\n        const overallDefaultColor = document.querySelector('.overallSettings .defaultColor');\r\n        let rtn = {};\r\n        \r\n        rtn['defaultColor'] = overallDefaultColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getSquareSlideInFromLeftSettings() {\r\n        const SquareSlideInFromLeftRectangleColor = document.querySelector('.tteSettingsContents-squareSlideInFromLeft .squareColor');\r\n        let rtn = {};\r\n\r\n        rtn['rectangleColor'] = SquareSlideInFromLeftRectangleColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getPopOutSettings() {\r\n        const PopOutShadowColor = document.querySelector('.tteSettingsContents-PopOut .shadowColor');\r\n        let rtn = {};\r\n\r\n        rtn['shadowColor'] = PopOutShadowColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getLineSwipeSettings() {\r\n        const lineSwipeBorderColor = document.querySelector('.tteSettingsContents-lineSwipe .lineSwipeBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = lineSwipeBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getGateMarkSettings() {\r\n        const GateMarkGateColor = document.querySelector('.tteSettingsContents-gateMark .gateMarkGateColor');\r\n        let rtn = {};\r\n\r\n        rtn['gateColor'] = GateMarkGateColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderRoundTrailSettings() {\r\n        const BorderRoundTrailBorderColor = document.querySelector('.tteSettingsContents-borderRoundTrail .borderRoundTrailBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderRoundTrailBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailT2BSettings() {\r\n        const BorderSplitTrailT2BBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailT2B .borderSplitTrailT2BBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailT2BBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailB2TSettings() {\r\n        const BorderSplitTrailB2TBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailB2T .borderSplitTrailB2TBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailB2TBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailL2RSettings() {\r\n        const BorderSplitTrailL2RBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailL2R .borderSplitTrailL2RBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailL2RBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailR2LSettings() {\r\n        const BorderSplitTrailR2LBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailR2L .borderSplitTrailR2LBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailR2LBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getLineCurtainSettings() {\r\n        const LineCurtainLineColor = document.querySelector('.tteSettingsContents-lineCurtain .lineCurtainLineColor');\r\n        let rtn = {};\r\n\r\n        rtn['lineColor'] = LineCurtainLineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getHalfBackgroundRotateSettings() {\r\n        const halfBackgroundRotateBackgroundColor = document.querySelector('.tteSettingsContents-halfBackgroundRotate .halfBackgroundRotateBackgroundColor');\r\n        let rtn = {};\r\n\r\n        rtn['backgroundColor'] = halfBackgroundRotateBackgroundColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getDoubleLineSlideInSettings() {\r\n        const doubleLineSlideInLineColor = document.querySelector('.tteSettingsContents-doubleLineSlideIn .doubleLineSlideInLineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = doubleLineSlideInLineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow1Settings() {\r\n        const accentUnderlineGrow1UnderlineColor = document.querySelector('.tteSettingsContents-accentUnderlineGrow1 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1UnderlineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow2Settings() {\r\n        const accentUnderlineGrow1Under2ineColor = document.querySelector('.tteSettingsContents-accentUnderlineGrow2 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1Under2ineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function fetchSaveData(saveData) {\r\n        wp.apiFetch({\r\n            path: 'tantive-text-effects/v1/save-settings',\r\n            method: 'POST',\r\n            body: JSON.stringify(saveData),\r\n        })\r\n        .then((response) => {\r\n            alert(response['message']);\r\n        })\r\n        .catch((error) => {\r\n            console.error('Error fetching settings:', error);\r\n        });\r\n    }\r\n}"],"names":["saveButtonClicked","saveData","getOverallSettings","getSquareSlideInFromLeftSettings","getPopOutSettings","getLineSwipeSettings","getGateMarkSettings","getBorderRoundTrailSettings","getBorderSplitTrailT2BSettings","getBorderSplitTrailB2TSettings","getBorderSplitTrailL2RSettings","getBorderSplitTrailR2LSettings","getLineCurtainSettings","getHalfBackgroundRotateSettings","getDoubleLineSlideInSettings","getAccentUnderlineGrow1Settings","getAccentUnderlineGrow2Settings","fetchSaveData","overallDefaultColor","document","querySelector","rtn","value","SquareSlideInFromLeftRectangleColor","PopOutShadowColor","lineSwipeBorderColor","GateMarkGateColor","BorderRoundTrailBorderColor","BorderSplitTrailT2BBorderColor","BorderSplitTrailB2TBorderColor","BorderSplitTrailL2RBorderColor","BorderSplitTrailR2LBorderColor","LineCurtainLineColor","halfBackgroundRotateBackgroundColor","doubleLineSlideInLineColor","accentUnderlineGrow1UnderlineColor","accentUnderlineGrow1Under2ineColor","wp","apiFetch","path","method","body","JSON","stringify","then","response","alert","error","console","window","addEventListener","querySelectorAll","forEach","saveButtonNode"],"sourceRoot":""}
     1{"version":3,"file":"js/menu/menu.js","mappings":"mBAEA,IASaA,EAAT,WACI,IAAIC,EAAW,CAAC,EAEhBA,EAAkB,QAAIC,IACtBD,EAAgC,sBAAIE,IACpCF,EAAiB,OAAIG,IACrBH,EAAoB,UAAII,IACxBJ,EAAmB,SAAIK,IACvBL,EAA2B,iBAAIM,IAC/BN,EAA8B,oBAAIO,IAClCP,EAA8B,oBAAIQ,IAClCR,EAA8B,oBAAIS,IAClCT,EAA8B,oBAAIU,IAClCV,EAAsB,YAAIW,IAC1BX,EAA+B,qBAAIY,IACnCZ,EAA4B,kBAAIa,IAChCb,EAA+B,qBAAIc,IACnCd,EAA+B,qBAAIe,IACnCf,EAA+B,qBAAIgB,IACnChB,EAA+B,qBAAIiB,IAEnCC,EAAclB,EAClB,EAESC,EAAT,WACI,IAAMkB,EAAsBC,SAASC,cAAc,kCAC/CC,EAAM,CAAC,EAIX,OAFAA,EAAkB,aAAIH,EAAoBI,MAEnCD,CACX,EAESpB,EAAT,WACI,IAAMsB,EAAsCJ,SAASC,cAAc,2DAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIE,EAAoCD,MAErDD,CACX,EAESnB,EAAT,WACI,IAAMsB,EAAoBL,SAASC,cAAc,4CAC7CC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIG,EAAkBF,MAEhCD,CACX,EAESlB,EAAT,WACI,IAAMsB,EAAuBN,SAASC,cAAc,wDAChDC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAII,EAAqBH,MAEnCD,CACX,EAESjB,EAAT,WACI,IAAMsB,EAAoBP,SAASC,cAAc,oDAC7CC,EAAM,CAAC,EAIX,OAFAA,EAAe,UAAIK,EAAkBJ,MAE9BD,CACX,EAEShB,EAAT,WACI,IAAMsB,EAA8BR,SAASC,cAAc,sEACvDC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIM,EAA4BL,MAE1CD,CACX,EAESf,EAAT,WACI,IAAMsB,EAAiCT,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIO,EAA+BN,MAE7CD,CACX,EAESd,EAAT,WACI,IAAMsB,EAAiCV,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIQ,EAA+BP,MAE7CD,CACX,EAESb,EAAT,WACI,IAAMsB,EAAiCX,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIS,EAA+BR,MAE7CD,CACX,EAESZ,EAAT,WACI,IAAMsB,EAAiCZ,SAASC,cAAc,4EAC1DC,EAAM,CAAC,EAIX,OAFAA,EAAiB,YAAIU,EAA+BT,MAE7CD,CACX,EAESX,EAAT,WACI,IAAMsB,EAAuBb,SAASC,cAAc,0DAChDC,EAAM,CAAC,EAIX,OAFAA,EAAe,UAAIW,EAAqBV,MAEjCD,CACX,EAESV,EAAT,WACI,IAAMsB,EAAsCd,SAASC,cAAc,kFAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAqB,gBAAIY,EAAoCX,MAEtDD,CACX,EAEST,EAAT,WACI,IAAMsB,EAA6Bf,SAASC,cAAc,sEACtDC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIa,EAA2BZ,MAE5CD,CACX,EAESR,EAAT,WACI,IAAMsB,EAAqChB,SAASC,cAAc,6DAC9DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIc,EAAmCb,MAEpDD,CACX,EAESP,EAAT,WACI,IAAMsB,EAAqCjB,SAASC,cAAc,6DAC9DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIe,EAAmCd,MAEpDD,CACX,EAESN,EAAT,WACI,IAAMsB,EAAsClB,SAASC,cAAc,6DAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIgB,EAAoCf,MAErDD,CACX,EAESL,EAAT,WACI,IAAMsB,EAAsCnB,SAASC,cAAc,6DAC/DC,EAAM,CAAC,EAIX,OAFAA,EAAoB,eAAIiB,EAAoChB,MAErDD,CACX,EAESJ,EAAT,SAAuBlB,GACnBwC,GAAGC,SAAS,CACRC,KAAM,wCACNC,OAAQ,OACRC,KAAMC,KAAKC,UAAU9C,KAExB+C,MAAK,SAACC,GACHC,MAAMD,EAAkB,QAC5B,IAAE,OACK,SAACE,GACJC,QAAQD,MAAM,2BAA4BA,EAC9C,GACJ,EArMAE,OAAOC,iBAAiB,QAAQ,WACJjC,SAASkC,iBAAiB,kBAClCC,SAAQ,SAAAC,GACpBA,EAAeH,iBAAiB,QAAStD,EAC7C,GACJ,G","sources":["webpack://tantive-text-effects/./src/js/menu/menu.js"],"sourcesContent":["\"use strict\";\r\n\r\n{\r\n    window.addEventListener('load', () => {\r\n        const saveButtonNodes = document.querySelectorAll('.tteSaveButton');\r\n        saveButtonNodes.forEach(saveButtonNode => {\r\n            saveButtonNode.addEventListener('click', saveButtonClicked);\r\n        });\r\n    });\r\n\r\n    \r\n    function saveButtonClicked() {\r\n        let saveData = {};\r\n\r\n        saveData['overall'] = getOverallSettings();\r\n        saveData['squareSlideInFromLeft'] = getSquareSlideInFromLeftSettings();\r\n        saveData['popOut'] = getPopOutSettings();\r\n        saveData['lineSwipe'] = getLineSwipeSettings();\r\n        saveData['gateMark'] = getGateMarkSettings();\r\n        saveData['borderRoundTrail'] = getBorderRoundTrailSettings();\r\n        saveData['borderSplitTrailT2B'] = getBorderSplitTrailT2BSettings();\r\n        saveData['borderSplitTrailB2T'] = getBorderSplitTrailB2TSettings();\r\n        saveData['borderSplitTrailL2R'] = getBorderSplitTrailL2RSettings();\r\n        saveData['borderSplitTrailR2L'] = getBorderSplitTrailR2LSettings();\r\n        saveData['lineCurtain'] = getLineCurtainSettings();\r\n        saveData['halfBackgroundRotate'] = getHalfBackgroundRotateSettings();\r\n        saveData['doubleLineSlideIn'] = getDoubleLineSlideInSettings();\r\n        saveData['accentUnderlineGrow1'] = getAccentUnderlineGrow1Settings();\r\n        saveData['accentUnderlineGrow2'] = getAccentUnderlineGrow2Settings();\r\n        saveData['accentUnderlineGrow3'] = getAccentUnderlineGrow3Settings();\r\n        saveData['accentUnderlineGrow4'] = getAccentUnderlineGrow4Settings();\r\n\r\n        fetchSaveData(saveData);\r\n    }\r\n\r\n    function getOverallSettings() {\r\n        const overallDefaultColor = document.querySelector('.overallSettings .defaultColor');\r\n        let rtn = {};\r\n        \r\n        rtn['defaultColor'] = overallDefaultColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getSquareSlideInFromLeftSettings() {\r\n        const SquareSlideInFromLeftRectangleColor = document.querySelector('.tteSettingsContents-squareSlideInFromLeft .squareColor');\r\n        let rtn = {};\r\n\r\n        rtn['rectangleColor'] = SquareSlideInFromLeftRectangleColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getPopOutSettings() {\r\n        const PopOutShadowColor = document.querySelector('.tteSettingsContents-PopOut .shadowColor');\r\n        let rtn = {};\r\n\r\n        rtn['shadowColor'] = PopOutShadowColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getLineSwipeSettings() {\r\n        const lineSwipeBorderColor = document.querySelector('.tteSettingsContents-lineSwipe .lineSwipeBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = lineSwipeBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getGateMarkSettings() {\r\n        const GateMarkGateColor = document.querySelector('.tteSettingsContents-gateMark .gateMarkGateColor');\r\n        let rtn = {};\r\n\r\n        rtn['gateColor'] = GateMarkGateColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderRoundTrailSettings() {\r\n        const BorderRoundTrailBorderColor = document.querySelector('.tteSettingsContents-borderRoundTrail .borderRoundTrailBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderRoundTrailBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailT2BSettings() {\r\n        const BorderSplitTrailT2BBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailT2B .borderSplitTrailT2BBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailT2BBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailB2TSettings() {\r\n        const BorderSplitTrailB2TBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailB2T .borderSplitTrailB2TBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailB2TBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailL2RSettings() {\r\n        const BorderSplitTrailL2RBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailL2R .borderSplitTrailL2RBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailL2RBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getBorderSplitTrailR2LSettings() {\r\n        const BorderSplitTrailR2LBorderColor = document.querySelector('.tteSettingsContents-borderSplitTrailR2L .borderSplitTrailR2LBorderColor');\r\n        let rtn = {};\r\n\r\n        rtn['borderColor'] = BorderSplitTrailR2LBorderColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getLineCurtainSettings() {\r\n        const LineCurtainLineColor = document.querySelector('.tteSettingsContents-lineCurtain .lineCurtainLineColor');\r\n        let rtn = {};\r\n\r\n        rtn['lineColor'] = LineCurtainLineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getHalfBackgroundRotateSettings() {\r\n        const halfBackgroundRotateBackgroundColor = document.querySelector('.tteSettingsContents-halfBackgroundRotate .halfBackgroundRotateBackgroundColor');\r\n        let rtn = {};\r\n\r\n        rtn['backgroundColor'] = halfBackgroundRotateBackgroundColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getDoubleLineSlideInSettings() {\r\n        const doubleLineSlideInLineColor = document.querySelector('.tteSettingsContents-doubleLineSlideIn .doubleLineSlideInLineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = doubleLineSlideInLineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow1Settings() {\r\n        const accentUnderlineGrow1UnderlineColor = document.querySelector('.tteSettingsContents-accentUnderlineGrow1 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1UnderlineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow2Settings() {\r\n        const accentUnderlineGrow1Under2ineColor = document.querySelector('.tteSettingsContents-accentUnderlineGrow2 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1Under2ineColor.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow3Settings() {\r\n        const accentUnderlineGrow1UnderlineColor3 = document.querySelector('.tteSettingsContents-accentUnderlineGrow3 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1UnderlineColor3.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function getAccentUnderlineGrow4Settings() {\r\n        const accentUnderlineGrow1UnderlineColor4 = document.querySelector('.tteSettingsContents-accentUnderlineGrow4 .underlineColor');\r\n        let rtn = {};\r\n\r\n        rtn['underlineColor'] = accentUnderlineGrow1UnderlineColor4.value;\r\n\r\n        return rtn;\r\n    }\r\n\r\n    function fetchSaveData(saveData) {\r\n        wp.apiFetch({\r\n            path: 'tantive-text-effects/v1/save-settings',\r\n            method: 'POST',\r\n            body: JSON.stringify(saveData),\r\n        })\r\n        .then((response) => {\r\n            alert(response['message']);\r\n        })\r\n        .catch((error) => {\r\n            console.error('Error fetching settings:', error);\r\n        });\r\n    }\r\n}"],"names":["saveButtonClicked","saveData","getOverallSettings","getSquareSlideInFromLeftSettings","getPopOutSettings","getLineSwipeSettings","getGateMarkSettings","getBorderRoundTrailSettings","getBorderSplitTrailT2BSettings","getBorderSplitTrailB2TSettings","getBorderSplitTrailL2RSettings","getBorderSplitTrailR2LSettings","getLineCurtainSettings","getHalfBackgroundRotateSettings","getDoubleLineSlideInSettings","getAccentUnderlineGrow1Settings","getAccentUnderlineGrow2Settings","getAccentUnderlineGrow3Settings","getAccentUnderlineGrow4Settings","fetchSaveData","overallDefaultColor","document","querySelector","rtn","value","SquareSlideInFromLeftRectangleColor","PopOutShadowColor","lineSwipeBorderColor","GateMarkGateColor","BorderRoundTrailBorderColor","BorderSplitTrailT2BBorderColor","BorderSplitTrailB2TBorderColor","BorderSplitTrailL2RBorderColor","BorderSplitTrailR2LBorderColor","LineCurtainLineColor","halfBackgroundRotateBackgroundColor","doubleLineSlideInLineColor","accentUnderlineGrow1UnderlineColor","accentUnderlineGrow1Under2ineColor","accentUnderlineGrow1UnderlineColor3","accentUnderlineGrow1UnderlineColor4","wp","apiFetch","path","method","body","JSON","stringify","then","response","alert","error","console","window","addEventListener","querySelectorAll","forEach","saveButtonNode"],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/js/menu/usage.js

    r3326117 r3329317  
    1 (()=>{"use strict";var e=function(){var e=document.querySelector(".animTypeWriter"),n=e.textContent;e.textContent="";var t=0,r=document.createElement("span");r.textContent="|",r.className="animTypeWriter--cursor",e.appendChild(r),function e(){t<n.length?(r.before(n[t]),t++,setTimeout(e,200)):r.remove()}()},n=function(e,n){var t=e.offsetHeight,r=e.innerHTML;e.innerHTML="";for(var a=[],i=0;i<r.length;i++){var o=document.createElement("span");o.className="tteLetter",o.innerHTML=" "!=r.charAt(i)?r.charAt(i):"&nbsp;",n&&o.style.setProperty(n,i),e.appendChild(o),a.push(o)}e.style.height=t+"px"};window.addEventListener("load",(function(){e()})),setInterval((function(){e()}),5e3),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(e){n(e,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(e){n(e,"--num")})),setInterval((function(){[".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(e){e.classList.add("visible"),setTimeout((function(){e.classList.remove("visible")}),4e3)}))}))}),5e3)})();
     1(()=>{"use strict";var e=function(){var e=document.querySelector(".animTypeWriter"),n=e.textContent;e.textContent="";var t=0,r=document.createElement("span");r.textContent="|",r.className="animTypeWriter--cursor",e.appendChild(r),function e(){t<n.length?(r.before(n[t]),t++,setTimeout(e,200)):r.remove()}()},n=function(e,n){var t=e.offsetHeight,r=e.innerHTML;e.innerHTML="";for(var i=[],a=0;a<r.length;a++){var o=document.createElement("span");o.className="tteLetter",o.innerHTML=" "!=r.charAt(a)?r.charAt(a):"&nbsp;",n&&o.style.setProperty(n,a),e.appendChild(o),i.push(o)}e.style.height=t+"px"};window.addEventListener("load",(function(){e()})),setInterval((function(){e()}),5e3),(document.querySelectorAll(".animBorderRoundTrail")||[]).forEach((function(e){var n=e.querySelector(".animBorderRoundTrail__content");e.style.setProperty("--num",n.innerHTML.length)})),(document.querySelectorAll(".animFlipCascade")||[]).forEach((function(e){n(e,"--num")})),(document.querySelectorAll(".animBlurZoomIn")||[]).forEach((function(e){n(e,"--num")})),setInterval((function(){[".animDashOneByOne",".animBorderRoundTrail",".animBorderSplitTrail",".animLineCurtain",".animFlipCascade",".animClockReveal",".animHalfBackgroundRotate",".animBlurZoomIn",".animDoubleLineSlideIn",".animAccentUnderlineGrow1",".animAccentUnderlineGrow2",".animAccentUnderlineGrow3",".animAccentUnderlineGrow4"].forEach((function(e){var n=document.querySelectorAll(e);n.length>0&&n.forEach((function(e){e.classList.add("visible"),setTimeout((function(){e.classList.remove("visible")}),4e3)}))}))}),5e3)})();
    22//# sourceMappingURL=usage.js.map

  • tantive-text-effects/trunk/dist/js/menu/usage.js.map

    r3326117 r3329317  
    1 {"version":3,"file":"js/menu/usage.js","mappings":"mBAEA,IASaA,EAAT,WACI,IAAMC,EAAOC,SAASC,cAAc,mBAC9BC,EAAWH,EAAKI,YACtBJ,EAAKI,YAAc,GAEnB,IAAIC,EAAI,EACFC,EAASL,SAASM,cAAc,QACtCD,EAAOF,YAAc,IACrBE,EAAOE,UAAY,yBACnBR,EAAKS,YAAYH,GAEjB,SAASI,IACFL,EAAIF,EAASQ,QACZL,EAAOM,OAAOT,EAASE,IACvBA,IACAQ,WAAWH,EAAM,MAEjBJ,EAAOQ,QAEf,CAEAJ,EAEJ,EA6DSK,EAAT,SAAsBf,EAAMgB,GACxB,IAAIC,EAAYjB,EAAKkB,aAEjBC,EAAUnB,EAAKoB,UACnBpB,EAAKoB,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLhB,EAAI,EAAGA,EAAIc,EAAQR,OAAQN,IAAK,CACrC,IAAIiB,EAASrB,SAASM,cAAc,QACpCe,EAAOd,UAAY,YACnBc,EAAOF,UAAiC,KAArBD,EAAQI,OAAOlB,GAAUc,EAAQI,OAAOlB,GAAG,SAC3DW,GACCM,EAAOE,MAAMC,YAAYT,EAAUX,GACvCL,EAAKS,YAAYa,GACjBD,EAAQK,KAAKJ,EACjB,CAEAtB,EAAKwB,MAAMG,OAASV,EAAY,IACpC,EA7GAW,OAAOC,iBAAiB,QAAQ,WAC5B9B,GACJ,IAEA+B,aAAY,WACR/B,GACJ,GAAG,MA4BiCE,SAAS8B,iBAAiB,0BAE5B,IAAIC,SAAQ,SAAAC,GACtC,IAAIC,EAAcD,EAAyB/B,cAAc,kCACzD+B,EAAyBT,MAAMC,YAAY,QAAQS,EAAYd,UAAUT,OAC7E,KAM2BV,SAAS8B,iBAAiB,qBAE5B,IAAIC,SAAQ,SAAAG,GACjCpB,EAAaoB,EAAqB,QACtC,KAK0BlC,SAAS8B,iBAAiB,oBAE5B,IAAIC,SAAQ,SAAAI,GAChCrB,EAAaqB,EAAoB,QACrC,IAIJN,aAAY,WAEU,CACd,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,6BAGME,SAAQ,SAAAK,GACd,IAAMC,EAAerC,SAAS8B,iBAAiBM,GAC5CC,EAAa3B,OAAS,GACrB2B,EAAaN,SAAQ,SAAAO,GACjBA,EAAYC,UAAUC,IAAI,WAC1B5B,YAAW,WACP0B,EAAYC,UAAU1B,OAAO,UACjC,GAAG,IACP,GAER,GAEJ,GAAG,I","sources":["webpack://tantive-text-effects/./src/js/menu/usage.js"],"sourcesContent":["\"use strict\";\r\n\r\n{\r\n    window.addEventListener('load', () => {\r\n        typeWriter();\r\n    });\r\n\r\n    setInterval(() => {\r\n        typeWriter();\r\n    }, 5000);\r\n\r\n    function typeWriter() {\r\n        const node = document.querySelector('.animTypeWriter');\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n\r\n    }\r\n\r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n\r\n    setInterval(() => {\r\n\r\n        const animArray = [\r\n            '.animDashOneByOne',\r\n            '.animBorderRoundTrail',\r\n            '.animBorderSplitTrail',\r\n            '.animLineCurtain',\r\n            '.animFlipCascade',\r\n            '.animClockReveal',\r\n            '.animHalfBackgroundRotate',\r\n            '.animBlurZoomIn',\r\n            '.animDoubleLineSlideIn',\r\n            '.animAccentUnderlineGrow1',\r\n            '.animAccentUnderlineGrow2',\r\n        ];\r\n\r\n        animArray.forEach(animItem => {\r\n            const animatedElms = document.querySelectorAll(animItem);\r\n            if(animatedElms.length > 0) {\r\n                animatedElms.forEach(animatedElm => {\r\n                    animatedElm.classList.add('visible');\r\n                    setTimeout(() => {\r\n                        animatedElm.classList.remove('visible');\r\n                    }, 4000);\r\n                });\r\n            }\r\n        });\r\n\r\n    }, 5000);\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n\r\n}"],"names":["typeWriter","node","document","querySelector","fullText","textContent","i","cursor","createElement","className","appendChild","type","length","before","setTimeout","remove","splitLetters","duration","nodeHight","offsetHeight","content","innerHTML","letters","letter","charAt","style","setProperty","push","height","window","addEventListener","setInterval","querySelectorAll","forEach","animBorderRoundTrailNode","contentNode","animFlipCascadeNode","animBlurZoomInNode","animItem","animatedElms","animatedElm","classList","add"],"sourceRoot":""}
     1{"version":3,"file":"js/menu/usage.js","mappings":"mBAEA,IASaA,EAAT,WACI,IAAMC,EAAOC,SAASC,cAAc,mBAC9BC,EAAWH,EAAKI,YACtBJ,EAAKI,YAAc,GAEnB,IAAIC,EAAI,EACFC,EAASL,SAASM,cAAc,QACtCD,EAAOF,YAAc,IACrBE,EAAOE,UAAY,yBACnBR,EAAKS,YAAYH,GAEjB,SAASI,IACFL,EAAIF,EAASQ,QACZL,EAAOM,OAAOT,EAASE,IACvBA,IACAQ,WAAWH,EAAM,MAEjBJ,EAAOQ,QAEf,CAEAJ,EAEJ,EA+DSK,EAAT,SAAsBf,EAAMgB,GACxB,IAAIC,EAAYjB,EAAKkB,aAEjBC,EAAUnB,EAAKoB,UACnBpB,EAAKoB,UAAY,GAEjB,IADA,IAAIC,EAAU,GACLhB,EAAI,EAAGA,EAAIc,EAAQR,OAAQN,IAAK,CACrC,IAAIiB,EAASrB,SAASM,cAAc,QACpCe,EAAOd,UAAY,YACnBc,EAAOF,UAAiC,KAArBD,EAAQI,OAAOlB,GAAUc,EAAQI,OAAOlB,GAAG,SAC3DW,GACCM,EAAOE,MAAMC,YAAYT,EAAUX,GACvCL,EAAKS,YAAYa,GACjBD,EAAQK,KAAKJ,EACjB,CAEAtB,EAAKwB,MAAMG,OAASV,EAAY,IACpC,EA/GAW,OAAOC,iBAAiB,QAAQ,WAC5B9B,GACJ,IAEA+B,aAAY,WACR/B,GACJ,GAAG,MA4BiCE,SAAS8B,iBAAiB,0BAE5B,IAAIC,SAAQ,SAAAC,GACtC,IAAIC,EAAcD,EAAyB/B,cAAc,kCACzD+B,EAAyBT,MAAMC,YAAY,QAAQS,EAAYd,UAAUT,OAC7E,KAM2BV,SAAS8B,iBAAiB,qBAE5B,IAAIC,SAAQ,SAAAG,GACjCpB,EAAaoB,EAAqB,QACtC,KAK0BlC,SAAS8B,iBAAiB,oBAE5B,IAAIC,SAAQ,SAAAI,GAChCrB,EAAaqB,EAAoB,QACrC,IAIJN,aAAY,WAEU,CACd,oBACA,wBACA,wBACA,mBACA,mBACA,mBACA,4BACA,kBACA,yBACA,4BACA,4BACA,4BACA,6BAGME,SAAQ,SAAAK,GACd,IAAMC,EAAerC,SAAS8B,iBAAiBM,GAC5CC,EAAa3B,OAAS,GACrB2B,EAAaN,SAAQ,SAAAO,GACjBA,EAAYC,UAAUC,IAAI,WAC1B5B,YAAW,WACP0B,EAAYC,UAAU1B,OAAO,UACjC,GAAG,IACP,GAER,GAEJ,GAAG,I","sources":["webpack://tantive-text-effects/./src/js/menu/usage.js"],"sourcesContent":["\"use strict\";\r\n\r\n{\r\n    window.addEventListener('load', () => {\r\n        typeWriter();\r\n    });\r\n\r\n    setInterval(() => {\r\n        typeWriter();\r\n    }, 5000);\r\n\r\n    function typeWriter() {\r\n        const node = document.querySelector('.animTypeWriter');\r\n        const fullText = node.textContent;\r\n        node.textContent = '';\r\n\r\n        let i = 0;\r\n        const cursor = document.createElement('span');\r\n        cursor.textContent = '|';\r\n        cursor.className = 'animTypeWriter--cursor';\r\n        node.appendChild(cursor);\r\n\r\n        function type() {\r\n            if(i < fullText.length) {\r\n                cursor.before(fullText[i]);\r\n                i++\r\n                setTimeout(type, 200);\r\n            } else {\r\n                cursor.remove();\r\n            }\r\n        }\r\n\r\n        type();\r\n\r\n    }\r\n\r\n    function animBorderRoundTrail () {\r\n        let animBorderRoundTrailNodes = document.querySelectorAll('.animBorderRoundTrail');\r\n\r\n        (animBorderRoundTrailNodes || []).forEach(animBorderRoundTrailNode => {\r\n            let contentNode = animBorderRoundTrailNode.querySelector('.animBorderRoundTrail__content');\r\n            animBorderRoundTrailNode.style.setProperty('--num',contentNode.innerHTML.length);\r\n        });\r\n    }\r\n\r\n    animBorderRoundTrail();\r\n\r\n    function animFlipCascade () {\r\n        let animFlipCascadeNodes = document.querySelectorAll('.animFlipCascade');\r\n        \r\n        (animFlipCascadeNodes || []).forEach(animFlipCascadeNode => {\r\n            splitLetters(animFlipCascadeNode, '--num');\r\n        });\r\n    }\r\n    animFlipCascade();\r\n\r\n    function animBlurZoomIn () {\r\n        let animBlurZoomInNodes = document.querySelectorAll('.animBlurZoomIn');\r\n        \r\n        (animBlurZoomInNodes || []).forEach(animBlurZoomInNode => {\r\n            splitLetters(animBlurZoomInNode, '--num');\r\n        });\r\n    }\r\n    animBlurZoomIn();\r\n\r\n    setInterval(() => {\r\n\r\n        const animArray = [\r\n            '.animDashOneByOne',\r\n            '.animBorderRoundTrail',\r\n            '.animBorderSplitTrail',\r\n            '.animLineCurtain',\r\n            '.animFlipCascade',\r\n            '.animClockReveal',\r\n            '.animHalfBackgroundRotate',\r\n            '.animBlurZoomIn',\r\n            '.animDoubleLineSlideIn',\r\n            '.animAccentUnderlineGrow1',\r\n            '.animAccentUnderlineGrow2',\r\n            '.animAccentUnderlineGrow3',\r\n            '.animAccentUnderlineGrow4',\r\n        ];\r\n\r\n        animArray.forEach(animItem => {\r\n            const animatedElms = document.querySelectorAll(animItem);\r\n            if(animatedElms.length > 0) {\r\n                animatedElms.forEach(animatedElm => {\r\n                    animatedElm.classList.add('visible');\r\n                    setTimeout(() => {\r\n                        animatedElm.classList.remove('visible');\r\n                    }, 4000);\r\n                });\r\n            }\r\n        });\r\n\r\n    }, 5000);\r\n\r\n    function splitLetters(node, duration) {\r\n        let nodeHight = node.offsetHeight;\r\n      \r\n        let content = node.innerHTML;\r\n        node.innerHTML = '';\r\n        let letters = [];\r\n        for (var i = 0; i < content.length; i++) {\r\n            let letter = document.createElement('span');\r\n            letter.className = 'tteLetter';\r\n            letter.innerHTML = content.charAt(i) != ' '?content.charAt(i):'&nbsp;';\r\n            if(duration)\r\n                letter.style.setProperty(duration, i);\r\n            node.appendChild(letter);\r\n            letters.push(letter);\r\n        }\r\n  \r\n        node.style.height = nodeHight + 'px';\r\n    }\r\n\r\n}"],"names":["typeWriter","node","document","querySelector","fullText","textContent","i","cursor","createElement","className","appendChild","type","length","before","setTimeout","remove","splitLetters","duration","nodeHight","offsetHeight","content","innerHTML","letters","letter","charAt","style","setProperty","push","height","window","addEventListener","setInterval","querySelectorAll","forEach","animBorderRoundTrailNode","contentNode","animFlipCascadeNode","animBlurZoomInNode","animItem","animatedElms","animatedElm","classList","add"],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/menu-style.css

    r3326117 r3329317  
    1 :root{--tte-borderRoundTrailBorderColor: red}.ttef-usage-wrap{padding:1em}.ttef-section-toc{margin-top:2em}.ttef-toc{width:20em;padding-right:1em;padding-left:1em;border:1px solid #ccc}.ttef-toc h2{position:relative;text-align:center}.ttef-toc h2::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:50%;height:2px;background-color:#ccc}.ttef-section-basicUsage{margin-top:2em}.ttef-section-basicUsage--contents{padding-left:2em}.ttef-section-notice{margin-top:2em}.ttef-section-notice .hasDisplayFlex{display:flex;gap:2em;justify-content:flex-start;align-items:center}.ttef-section-notice .hasDisplayFlex .ttef-arrow{width:30px;height:30px;clip-path:polygon(0 0, 100% 50%, 0 100%);background-color:#ccc}.ttef-section-notice--contents{padding-left:2em}.ttef-section-catalogue{margin-top:2em}.ttef-section-catalogue--contents{padding-left:2em}.ttef-section-catalogue__container{display:grid;grid-template-columns:repeat(3, 200px);gap:1em}.ttef-section-catalogue__item{padding:1em;border:1px solid #ccc}.ttef-section-catalogue__playArea{margin-right:auto;margin-left:auto;padding:1em;height:75px;background-color:#fff}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;width:fit-content;overflow:hidden}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:red;top:0}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{width:fit-content;transform:translateX(-100%)}.ttef-section-catalogue__playArea .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 2s infinite}.ttef-section-catalogue__playArea .animSquareSlideInFromLeft__content{animation:animSquareSlideInFromLeft__content 2s infinite}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}16%{width:100%;left:0;transform:translatX(0)}40%{width:100%;left:0;right:100%}50%{width:0;right:0;left:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}40%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(0)}}.animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyDrop;animation-duration:7.5s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}5%{opacity:1;transform:translateY(30%)}10%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.animWavyRise .tteLetter{display:inline-block;transform:translateY(100%);opacity:0;animation-name:animWavyRise;animation-duration:7.5s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}5%{opacity:1;transform:translateY(-30%)}10%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.animPopOut .tteLetter{display:inline-block;margin-right:.25em;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.animPopOut .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.animPopOut .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}75%{transform:translate(0, 0);text-shadow:0 0 red}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}100%{transform:translate(0, 0)}}.ttef-section-setttings{margin-top:2em}.ttef-section-setttings table,.ttef-section-setttings td,.ttef-section-setttings th{border-collapse:collapse;border:1px solid}.ttef-section-setttings td,.ttef-section-setttings th{padding:1em}.tteSettingBox{display:flex;padding-left:2em}.tteSettingsContents--title{margin-left:1em;margin-right:1em}.tteSettingsContents--content{display:flex;align-items:center}.tteSettingsContents--content .wp-color-result.button{margin:0}.animLineSwipe{position:relative;width:fit-content}.animLineSwipe::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;animation:animLineSwipeBarSwipe 4.1s infinite}.animLineSwipe::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;opacity:0;animation:animLineSwipeBorder 4.1s ease-in-out infinite}.animLineSwipe p{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite}@keyframes animLineSwipeBarSwipe{0%{left:0;opacity:1}24.4%{left:100%;opacity:1}26.8%{left:100%;opacity:0}100%{left:0;opacity:0}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{0%{opacity:0}25%{opacity:0}75%{opacity:1}100%{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}2.4%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}26.8%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.animGateMark p{position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 5s ease-in-out infinite}.animGateMark p::before,.animGateMark p::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:red;transform:scale(0, 1);animation:animGateMarkGate 5s ease-in-out infinite}.animGateMark p::before{left:0;transform-origin:0 50%}.animGateMark p::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{0%{transform:scale(0, 1)}20%{transform:scale(0, 1)}30%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}.animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap}.animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.1s*var(--num)*2 + 1s) ease-in-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.1s*var(--num)) ease-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.1s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.1s*var(--num)) calc(.1s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:red}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s 1s forwards;clip-path:var(--animBorderSplitTrail-b0)}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s 1s forwards;clip-path:var(--animBorderSplitTrail-a0)}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:red;animation:animLineCurtain--wrap 1s forwards}.animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.animFlipCascade{display:flex}.animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.animClockReveal .animClockReveal__content{width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:red;transform-origin:50% 0}.animHalfBackgroundRotate .animHalfBackgroundRotate__content{width:fit-content;position:relative;z-index:3}.animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:red}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red;transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:1px}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:4px}.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:red;transform-origin:0 50%}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}
     1:root{--tte-borderRoundTrailBorderColor: red}.ttef-usage-wrap{padding:1em}.ttef-section-toc{margin-top:2em}.ttef-toc{width:20em;padding-right:1em;padding-left:1em;border:1px solid #ccc}.ttef-toc h2{position:relative;text-align:center}.ttef-toc h2::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:50%;height:2px;background-color:#ccc}.ttef-section-basicUsage{margin-top:2em}.ttef-section-basicUsage--contents{padding-left:2em}.ttef-section-notice{margin-top:2em}.ttef-section-notice .hasDisplayFlex{display:flex;gap:2em;justify-content:flex-start;align-items:center}.ttef-section-notice .hasDisplayFlex .ttef-arrow{width:30px;height:30px;clip-path:polygon(0 0, 100% 50%, 0 100%);background-color:#ccc}.ttef-section-notice--contents{padding-left:2em}.ttef-section-catalogue{margin-top:2em}.ttef-section-catalogue--contents{padding-left:2em}.ttef-section-catalogue__container{display:grid;grid-template-columns:repeat(3, 200px);gap:1em}.ttef-section-catalogue__item{padding:1em;border:1px solid #ccc}.ttef-section-catalogue__playArea{margin-right:auto;margin-left:auto;padding:1em;height:75px;background-color:#fff}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;width:fit-content;overflow:hidden}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:red;top:0}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{width:fit-content;transform:translateX(-100%)}.ttef-section-catalogue__playArea .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 2s infinite}.ttef-section-catalogue__playArea .animSquareSlideInFromLeft__content{animation:animSquareSlideInFromLeft__content 2s infinite}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}16%{width:100%;left:0;transform:translatX(0)}40%{width:100%;left:0;right:100%}50%{width:0;right:0;left:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}40%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(0)}}.animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0;animation-name:animWavyDrop;animation-duration:7.5s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}5%{opacity:1;transform:translateY(30%)}10%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.animWavyRise .tteLetter{display:inline-block;transform:translateY(100%);opacity:0;animation-name:animWavyRise;animation-duration:7.5s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-iteration-count:infinite}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}5%{opacity:1;transform:translateY(-30%)}10%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}.animPopOut .tteLetter{display:inline-block;margin-right:.25em;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.animPopOut .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.animPopOut .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}75%{transform:translate(0, 0);text-shadow:0 0 red}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em red}100%{transform:translate(0, 0)}}.ttef-section-setttings{margin-top:2em}.ttef-section-setttings table,.ttef-section-setttings td,.ttef-section-setttings th{border-collapse:collapse;border:1px solid}.ttef-section-setttings td,.ttef-section-setttings th{padding:1em}.tteSettingBox{display:flex;padding-left:2em}.tteSettingsContents--title{margin-left:1em;margin-right:1em}.tteSettingsContents--content{display:flex;align-items:center}.tteSettingsContents--content .wp-color-result.button{margin:0}.animLineSwipe{position:relative;width:fit-content}.animLineSwipe::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;animation:animLineSwipeBarSwipe 4.1s infinite}.animLineSwipe::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:red;opacity:0;animation:animLineSwipeBorder 4.1s ease-in-out infinite}.animLineSwipe p{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 4.1s cubic-bezier(0.77, 0, 0.175, 1) infinite}@keyframes animLineSwipeBarSwipe{0%{left:0;opacity:1}24.4%{left:100%;opacity:1}26.8%{left:100%;opacity:0}100%{left:0;opacity:0}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{0%{opacity:0}25%{opacity:0}75%{opacity:1}100%{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}2.4%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}26.8%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.animGateMark p{position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 5s ease-in-out infinite}.animGateMark p::before,.animGateMark p::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:red;transform:scale(0, 1);animation:animGateMarkGate 5s ease-in-out infinite}.animGateMark p::before{left:0;transform-origin:0 50%}.animGateMark p::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{0%{transform:scale(0, 1)}20%{transform:scale(0, 1)}30%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}.animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap}.animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.1s*var(--num)*2 + 1s) ease-in-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.1s*var(--num)) ease-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.1s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.1s*var(--num)) calc(.1s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:red}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s 1s forwards;clip-path:var(--animBorderSplitTrail-b0)}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s 1s forwards;clip-path:var(--animBorderSplitTrail-a0)}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:red;animation:animLineCurtain--wrap 1s forwards}.animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.animFlipCascade{display:flex}.animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.animClockReveal .animClockReveal__content{width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:red;transform-origin:50% 0}.animHalfBackgroundRotate .animHalfBackgroundRotate__content{width:fit-content;position:relative;z-index:3}.animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:red}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red;transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:1px}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:4px}.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:red;transform-origin:0 50%}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::before{animation:animAccentUnderlineGrow3--line .3s .3s ease-in-out forwards}.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::after{animation:animAccentUnderlineGrow3--dot .3s ease-in-out forwards}.animAccentUnderlineGrow3__content{position:relative;width:fit-content}.animAccentUnderlineGrow3__content::before,.animAccentUnderlineGrow3__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red}.animAccentUnderlineGrow3__content::before{width:min(80%,4em);height:1px;transform:translate(-50%, 50%) scaleX(0)}.animAccentUnderlineGrow3__content::after{width:10px;height:10px;border-radius:50%;transform:translate(-50%, 50%);opacity:0}@keyframes animAccentUnderlineGrow3--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow3--dot{to{opacity:1}}.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::before{animation:animAccentUnderlineGrow4--line .3s ease-in-out forwards}.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::after{animation:animAccentUnderlineGrow4--dot 1s .3s linear forwards}.animAccentUnderlineGrow4__content{position:relative;width:fit-content;padding-bottom:.5em}.animAccentUnderlineGrow4__content::before,.animAccentUnderlineGrow4__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:red}.animAccentUnderlineGrow4__content::before{width:100%;height:1px;transform:translate(-50%, 50%) scaleX(0);transform-origin:0 50%}.animAccentUnderlineGrow4__content::after{width:10px;height:10px;left:100%;border-radius:50%;transform:translateY(50%);opacity:0}@keyframes animAccentUnderlineGrow4--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow4--dot{0%{opacity:1}60%{left:0}70%{left:1.6em}80%{left:.7em}90%{left:1.2em}100%{left:1em;opacity:1}}
    22
    33/*# sourceMappingURL=menu-style.css.map*/

  • tantive-text-effects/trunk/dist/menu-style.css.map

    r3326117 r3329317  
    1 {"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,Q","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"],"names":[],"sourceRoot":""}
     1{"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,yB","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"],"names":[],"sourceRoot":""}

  • tantive-text-effects/trunk/dist/style.css

    r3326117 r3329317  
    1 .animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;overflow:hidden}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:var(--tte-squareSlideInFromLeftRectangleColor, var(--tte-overallDefaultColor));top:0}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{transform:translateX(-100%)}.animSquareSlideInFromLeft.visible .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 1s forwards}.animSquareSlideInFromLeft.visible .animSquareSlideInFromLeft__content{animation:animSquareSlideInFromLeft__content .2s .8s forwards}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}30%{width:100%;left:0;transform:translateX(0)}80%{width:100%;left:0;right:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}.animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0}.animWavyDrop.visible .tteLetter{animation-name:animWavyDrop;animation-duration:.75s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-fill-mode:forwards;transform:translateY(0)}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(30%)}100%{opacity:1;transform:translateY(0)}}.animWavyRise .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0}.animWavyRise.visible .tteLetter{animation-name:animWavyRise;animation-duration:.75s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-fill-mode:forwards;transform:translateY(0)}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}50%{opacity:1;transform:translateY(-30%)}100%{opacity:1;transform:translateY(0)}}.animPopOut.visible .tteLetter{display:inline-block;margin-right:.25em}.animPopOut.visible.visible .tteLetter{animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.animPopOut.visible.visible .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.animPopOut.visible.visible .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}75%{transform:translate(0, 0);text-shadow:0 0 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}100%{transform:translate(0, 0)}}.animLineSwipe.visible{position:relative;width:fit-content}.animLineSwipe.visible::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:var(--tte-lineSwipeBorderColor);animation:animLineSwipeBarSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards,animLineSwipeBarFadeOut .1s ease-in-out forwards;animation-delay:0s,1s}.animLineSwipe.visible::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:var(--tte-lineSwipeBorderColor);opacity:0;animation:animLineSwipeBorder 2s 1s ease-in-out forwards}.animLineSwipe.visible .animLineSwipe__content{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 1s .1s cubic-bezier(0.77, 0, 0.175, 1) forwards}@keyframes animLineSwipeBarSwipe{0%{left:0}100%{left:100%}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{to{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.animGateMark.visible .animGateMark__content{position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 1s ease-in-out forwards}.animGateMark.visible .animGateMark__content::before,.animGateMark.visible .animGateMark__content::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:var(--tte-gateMarkLineColor);transform:scale(0, 1);animation:animGateMarkGate .5s 1s ease-in-out forwards}.animGateMark.visible .animGateMark__content::before{left:0;transform-origin:0 50%}.animGateMark.visible .animGateMark__content::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{to{transform:scale(1, 1)}}.animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap}.animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.1s*var(--num)*2 + 1s) ease-in-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.1s*var(--num)) ease-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.1s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.1s*var(--num)) calc(.1s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s .5s forwards;clip-path:var(--animBorderSplitTrail-b0)}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s .5s forwards;clip-path:var(--animBorderSplitTrail-a0)}.animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::after{background-color:var(--tte-borderSplitTrailt2bBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::after{background-color:var(--tte-borderSplitTrailb2tBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::after{background-color:var(--tte-borderSplitTraill2rBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::after{background-color:var(--tte-borderSplitTrailr2lBorderColor)}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:var(--tte-lineCurtainLineColor);animation:animLineCurtain--wrap 1s forwards}.animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.animFlipCascade{display:flex}.animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.animClockReveal .animClockReveal__content{width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s .5s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:var(--tte-halfBackgroundRotateBackgroundColor);z-index:-1;transform-origin:50% 0}.animHalfBackgroundRotate .animHalfBackgroundRotate__content{width:fit-content}.animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s .5s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s + .5s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:var(--tte-doubleLineSlideInLineColor)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:var(--tte-accentUnderlineGrow1LineColor);transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:1px}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:4px}.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:var(--tte-accentUnderlineGrow2LineColor);transform-origin:0 50%}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}
     1.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square{position:relative;overflow:hidden}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__Square::before{content:"";position:absolute;width:0;height:100%;background-color:var(--tte-squareSlideInFromLeftRectangleColor, var(--tte-overallDefaultColor));top:0}.animSquareSlideInFromLeft .animSquareSlideInFromLeft__content{transform:translateX(-100%)}.animSquareSlideInFromLeft.visible .animSquareSlideInFromLeft__Square::before{animation:animSquareSlideInFromLeft__square--before 1s forwards}.animSquareSlideInFromLeft.visible .animSquareSlideInFromLeft__content{animation:animSquareSlideInFromLeft__content .2s .8s forwards}@keyframes animSquareSlideInFromLeft__square--before{0%{width:0;left:0;transform:translateX(0)}30%{width:100%;left:0;transform:translateX(0)}80%{width:100%;left:0;right:100%}100%{width:0;right:0;left:100%}}@keyframes animSquareSlideInFromLeft__content{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}.animWavyDrop .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0}.animWavyDrop.visible .tteLetter{animation-name:animWavyDrop;animation-duration:.75s;animation-delay:calc(.1s*var(--animWavyDropDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-fill-mode:forwards;transform:translateY(0)}@keyframes animWavyDrop{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(30%)}100%{opacity:1;transform:translateY(0)}}.animWavyRise .tteLetter{display:inline-block;transform:translateY(-100%);opacity:0}.animWavyRise.visible .tteLetter{animation-name:animWavyRise;animation-duration:.75s;animation-delay:calc(.1s*var(--animWavyRiseDuration));animation-timing-function:cubic-bezier(0.42, 0, 0.33, 1);animation-fill-mode:forwards;transform:translateY(0)}@keyframes animWavyRise{0%{opacity:0;transform:translateY(100%)}50%{opacity:1;transform:translateY(-30%)}100%{opacity:1;transform:translateY(0)}}.animPopOut.visible .tteLetter{display:inline-block;margin-right:.25em}.animPopOut.visible.visible .tteLetter{animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:steps(1, end)}.animPopOut.visible.visible .tteLetter:nth-child(odd){animation-name:animPopOut-odd}.animPopOut.visible.visible .tteLetter:nth-child(even){animation-name:animPopOut-even}@keyframes animPopOut-odd{0%{transform:translate(0, 0)}25%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}75%{transform:translate(0, 0);text-shadow:0 0 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}100%{transform:translate(0, 0)}}@keyframes animPopOut-even{0%{transform:translate(0, 0)}50%{transform:translate(0.1em, -0.1em);text-shadow:-0.1em .1em var(--tte-popOutShadowColor, var(--tte-overallDefaultColor))}100%{transform:translate(0, 0)}}.animLineSwipe.visible{position:relative;width:fit-content}.animLineSwipe.visible::before{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:var(--tte-lineSwipeBorderColor);animation:animLineSwipeBarSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards,animLineSwipeBarFadeOut .1s ease-in-out forwards;animation-delay:0s,1s}.animLineSwipe.visible::after{content:"";position:absolute;width:4px;height:100%;top:0;left:0;background-color:var(--tte-lineSwipeBorderColor);opacity:0;animation:animLineSwipeBorder 2s 1s ease-in-out forwards}.animLineSwipe.visible .animLineSwipe__content{position:relative;width:fit-content;margin:0;animation:animLineSwipeContents 1s .1s cubic-bezier(0.77, 0, 0.175, 1) forwards}@keyframes animLineSwipeBarSwipe{0%{left:0}100%{left:100%}}@keyframes animLineSwipeBarFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes animLineSwipeBorder{to{opacity:1}}@keyframes animLineSwipeContents{0%{clip-path:polygon(0 0, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0)}}.animGateMark.visible .animGateMark__content{position:relative;width:fit-content;transform:scale(0);opacity:0;animation:animGateMarkContent 1s ease-in-out forwards}.animGateMark.visible .animGateMark__content::before,.animGateMark.visible .animGateMark__content::after{content:"";position:absolute;height:100%;width:4px;top:0;background-color:var(--tte-gateMarkLineColor);transform:scale(0, 1);animation:animGateMarkGate .5s 1s ease-in-out forwards}.animGateMark.visible .animGateMark__content::before{left:0;transform-origin:0 50%}.animGateMark.visible .animGateMark__content::after{right:0;transform-origin:100% 50%}@keyframes animGateMarkContent{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes animGateMarkGate{to{transform:scale(1, 1)}}.animDashOneByOne{display:flex;overflow:hidden;white-space:nowrap}.animDashOneByOne.visible span{display:inline-block;transform:translateX(calc(-1em * var(--animDashOneByOneNum)));animation:animDashOneByOneSlideIn .3s calc(.3s*var(--animDashOneByOneNum)) forwards}@keyframes animDashOneByOneSlideIn{0%{transform:translatex(calc(-1em * var(--animDashOneByOneNum)))}90%{transform:translateX(100%)}100%{transform:translateX(0)}}.animBorderRoundTrail .animBorderRoundTrail__content{position:relative;padding:1em;width:fit-content;outline:0px solid var(--tte-borderRoundTrailBorderColor)}.animBorderRoundTrail.visible .animBorderRoundTrail__content{animation:animBorderRoundTrail--finish .1s calc(.1s*var(--num)*2 + 1s) ease-in-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::before{content:"";position:absolute;width:4px;top:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--t2b .5s ease-out forwards,animBorderRoundTrail--b2t .5s calc(.1s*var(--num)) ease-out forwards}.animBorderRoundTrail.visible .animBorderRoundTrail__content::after{content:"";position:absolute;height:4px;bottom:0;left:0;background-color:var(--tte-borderRoundTrailBorderColor);animation:animBorderRoundTrail--l2r calc(.1s*var(--num)) .25s ease-out forwards,animBorderRoundTrail--r2l calc(.1s*var(--num)) calc(.1s*var(--num) + .25s) ease-out forwards}@keyframes animBorderRoundTrail--t2b{0%{height:0;left:0}50%{height:100%;top:0;left:0;bottom:100%}100%{height:0;left:0;top:100%;bottom:0}}@keyframes animBorderRoundTrail--l2r{0%{width:0}50%{width:100%;left:0;right:100%}100%{width:0%;left:100%;right:0}}@keyframes animBorderRoundTrail--b2t{0%{height:0;right:0;left:100%}50%{height:100%;right:0;left:100%;top:0;bottom:100%}100%{height:0;right:0;left:100%;top:0;bottom:100%}}@keyframes animBorderRoundTrail--r2l{0%{width:0;top:0;bottom:100%}50%{width:100%;top:0;bottom:100%;left:0;right:100%}100%{width:0%;top:0;left:0;right:100%}}@keyframes animBorderRoundTrail--finish{to{outline-width:4px}}.animBorderSplitTrailT2B{--animBorderSplitTrail-b0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--animBorderSplitTrail-b25: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b50: polygon(50% 0, 0 0, 0 4px , 0 4px, 4px 4px, 4px 4px, 4px 4px, 50% 4px);--animBorderSplitTrail-b75: polygon(50% 0, 0 0, 0 100%, 0 100%, 4px 100%, 4px 100%, 4px 4px, 50% 4px);--animBorderSplitTrail-b100: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% calc(100% - 4px), 4px calc(100% - 4px), 4px 4px, 50% 4px);--animBorderSplitTrail-a0: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 4px, 50% 4px, 50% 4px, 50% 4px);--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);--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);--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);--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)}.animBorderSplitTrailB2T{--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));--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));--animBorderSplitTrail-b50: polygon(50% 100%, 0 100%, 0 50%, 0 50%, 4px 50%, 4px 50%, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b75: polygon(50% 100%, 0 100%, 0 0, 4px 0, 4px 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--animBorderSplitTrail-b100: polygon(50% 100%, 0 100%, 0 0, 50% 0, 50% 4px, 4px 4px, 4px calc(100% - 4px), 50% calc(100% - 4px));--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));--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));--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));--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));--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))}.animBorderSplitTrailL2R{--animBorderSplitTrail-b0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--animBorderSplitTrail-b25: polygon(0 50%, 0 0, 4px 0 , 4px 0, 4px 4px, 4px 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b50: polygon(0 50%, 0 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b75: polygon(0 50%, 0 0, 100% 0, 100% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-b100: polygon(0 50%, 0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 4px 4px, 4px 50%);--animBorderSplitTrail-a0: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0px 50%, 4px 50%, 4px 50%, 4px 50%);--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%);--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%);--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%);--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%)}.animBorderSplitTrailR2L{--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%);--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%);--animBorderSplitTrail-b50: polygon(100% 50%, 100% 0, 50% 0 , 50% 0, 50% 4px, 50% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b75: polygon(100% 50%, 100% 0, 0 0, 0 4px, 4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--animBorderSplitTrail-b100: polygon(100% 50%, 100% 0, 0 0, 0 50%, 4px 50%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 50%);--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%);--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%);--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%);--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%);--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%)}.animBorderSplitTrail .animBorderSplitTrail__wrap{position:relative;width:fit-content}.animBorderSplitTrail .animBorderSplitTrail__content{padding:1em}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::before{animation:animBorderSplitTrail--b .5s .5s forwards;clip-path:var(--animBorderSplitTrail-b0)}.animBorderSplitTrail.visible .animBorderSplitTrail__wrap::after{animation:animBorderSplitTrail--a .5s .5s forwards;clip-path:var(--animBorderSplitTrail-a0)}.animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailT2B__wrap::after{background-color:var(--tte-borderSplitTrailt2bBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailB2T__wrap::after{background-color:var(--tte-borderSplitTrailb2tBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailL2R__wrap::after{background-color:var(--tte-borderSplitTraill2rBorderColor)}.animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::before,.animBorderSplitTrail.visible .animBorderSplitTrailR2L__wrap::after{background-color:var(--tte-borderSplitTrailr2lBorderColor)}@keyframes animBorderSplitTrail--b{0%{clip-path:var(--animBorderSplitTrail-b0)}25%{clip-path:var(--animBorderSplitTrail-b25)}50%{clip-path:var(--animBorderSplitTrail-b50)}75%{clip-path:var(--animBorderSplitTrail-b75)}100%{clip-path:var(--animBorderSplitTrail-b100)}}@keyframes animBorderSplitTrail--a{0%{clip-path:var(--animBorderSplitTrail-a0)}25%{clip-path:var(--animBorderSplitTrail-a25)}50%{clip-path:var(--animBorderSplitTrail-a50)}75%{clip-path:var(--animBorderSplitTrail-a75)}100%{clip-path:var(--animBorderSplitTrail-a100)}}.animLineCurtain .animLineCurtain__wrap{position:relative;width:fit-content}.animLineCurtain .animLineCurtain__content{opacity:0;width:fit-content;overflow:hidden}.animLineCurtain.visible .animLineCurtain__wrap::before{content:"";position:absolute;width:100%;height:3px;top:-3px;background-color:var(--tte-lineCurtainLineColor);animation:animLineCurtain--wrap 1s forwards}.animLineCurtain.visible .animLineCurtain__content{animation:animLineCurtain--content 1s 1s forwards}@keyframes animLineCurtain--wrap{0%{top:-3px}20%{top:calc(100% - 3px)}60%{top:50%}75%{top:calc(100% - 3px)}90%{top:70%}100%{top:calc(100% - 3px)}}@keyframes animLineCurtain--content{to{opacity:1}}.animFlipCascade{display:flex}.animFlipCascade span{display:inline-block;position:relative;transform:perspective(10000px) rotate3d(0, 1, 0, 0deg);transition:transform 1s}.animFlipCascade.visible span{transition-delay:calc(var(--num)*.2s);transform:perspective(1000px) rotate3d(0, 1, 0, 720deg)}.animClockReveal .animClockReveal__content{width:fit-content;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}.animClockReveal.visible .animClockReveal__content{animation:animClockReveal--right 2s .5s linear forwards}@keyframes animClockReveal--right{0%{clip-path:polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)}25%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 100%, 0 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 0 100%, 0 50%, 0 50%)}75%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 0 0)}100%{clip-path:polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 100%, 0 100%, 0 0, 50% 0)}}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap{position:relative;width:fit-content;overflow:hidden}.animHalfBackgroundRotate .animHalfBackgroundRotate__wrap::after{content:"";position:absolute;width:100%;height:50%;left:0;top:50%;background:var(--tte-halfBackgroundRotateBackgroundColor);z-index:-1;transform-origin:50% 0}.animHalfBackgroundRotate .animHalfBackgroundRotate__content{width:fit-content}.animHalfBackgroundRotate.visible .animHalfBackgroundRotate__wrap::after{animation:animHalfBackgroundRotate 1s .5s cubic-bezier(0.97, -0.35, 0.21, 1.32) forwards}@keyframes animHalfBackgroundRotate{to{transform:rotate(360deg)}}.animBlurZoomIn span{display:inline-block;opacity:0;transform:scale(2)}.animBlurZoomIn.visible span{animation:animBlurZoomIn 1s calc(var(--num)*.2s + .5s) forwards}@keyframes animBlurZoomIn{0%{transform:scale(4);filter:blur(4px);opacity:0}20%{transform:scale(1.6);opacity:1}100%{transform:scale(1);filter:blur(0);opacity:1}}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap{position:relative;width:fit-content;overflow:hidden}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{content:"";position:absolute;width:100%;height:4px;background-color:var(--tte-doubleLineSlideInLineColor)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::before{top:0;left:0;transform:translateX(-100%)}.animDoubleLineSlideIn .animDoubleLineSlideIn__wrap::after{bottom:0;right:0;transform:translateX(100%)}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::before,.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__wrap::after{animation:animDoubleLineSlideIn .3s .5s ease-in-out forwards}.animDoubleLineSlideIn.visible .animDoubleLineSlideIn__content{animation:animDoubleLineSlideIn .3s .7s ease-in-out forwards}.animDoubleLineSlideIn__content{transform:translateX(-100%)}@keyframes animDoubleLineSlideIn{to{transform:translateX(0)}}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content{position:relative;width:fit-content}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:var(--tte-accentUnderlineGrow1LineColor);transform:translate(-50%, 50%) scaleX(0);transform-origin:50% 50%}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::before{width:min(80%,4em);height:1px}.animAccentUnderlineGrow1 .animAccentUnderlineGrow1__content::after{width:min(20%,1em);height:4px}.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::before,.animAccentUnderlineGrow1.visible .animAccentUnderlineGrow1__content::after{animation:animAccentUnderlineGrow1 .3s .5s ease-in-out forwards}@keyframes animAccentUnderlineGrow1{to{transform:translate(-50%, 50%) scaleX(1)}}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content{position:relative;width:fit-content}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before,.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{content:"";position:absolute;bottom:0;background-color:var(--tte-accentUnderlineGrow2LineColor);transform-origin:0 50%}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::before{width:100%;height:1px;left:0;transform:translateY(50%) scaleX(0)}.animAccentUnderlineGrow2 .animAccentUnderlineGrow2__content::after{width:min(20%,1em);height:4px;right:0;transform:translateY(50%);opacity:0}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::before{animation:animAccentUnderlineGrow2__long .3s .5s ease-in-out forwards}.animAccentUnderlineGrow2.visible .animAccentUnderlineGrow2__content::after{animation:animAccentUnderlineGrow2__short .5s .8s ease-in-out forwards}@keyframes animAccentUnderlineGrow2__long{to{transform:translateY(50%) scaleX(1)}}@keyframes animAccentUnderlineGrow2__short{0%{opacity:0;right:0;left:100%}70%{left:0}85%{left:.5em}100%{opacity:1;left:0}}.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::before{animation:animAccentUnderlineGrow3--line .3s .3s ease-in-out forwards}.animAccentUnderlineGrow3.visible .animAccentUnderlineGrow3__content::after{animation:animAccentUnderlineGrow3--dot .3s ease-in-out forwards}.animAccentUnderlineGrow3__content{position:relative;width:fit-content}.animAccentUnderlineGrow3__content::before,.animAccentUnderlineGrow3__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:var(--tte-accentUnderlineGrow3LineColor)}.animAccentUnderlineGrow3__content::before{width:min(80%,4em);height:1px;transform:translate(-50%, 50%) scaleX(0)}.animAccentUnderlineGrow3__content::after{width:10px;height:10px;border-radius:50%;transform:translate(-50%, 50%);opacity:0}@keyframes animAccentUnderlineGrow3--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow3--dot{to{opacity:1}}.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::before{animation:animAccentUnderlineGrow4--line .3s ease-in-out forwards}.animAccentUnderlineGrow4.visible .animAccentUnderlineGrow4__content::after{animation:animAccentUnderlineGrow4--dot 1s .3s linear forwards}.animAccentUnderlineGrow4__content{position:relative;width:fit-content}.animAccentUnderlineGrow4__content::before,.animAccentUnderlineGrow4__content::after{content:"";position:absolute;bottom:0;left:50%;background-color:var(--tte-accentUnderlineGrow4LineColor)}.animAccentUnderlineGrow4__content::before{width:100%;height:1px;transform:translate(-50%, 50%) scaleX(0);transform-origin:0 50%}.animAccentUnderlineGrow4__content::after{width:10px;height:10px;left:100%;border-radius:50%;transform:translateY(50%);opacity:0}@keyframes animAccentUnderlineGrow4--line{to{transform:translate(-50%, 50%) scaleX(1)}}@keyframes animAccentUnderlineGrow4--dot{0%{opacity:1}60%{left:0}70%{left:1.6em}80%{left:.7em}90%{left:1.2em}100%{left:1em;opacity:1}}
    22
    33/*# sourceMappingURL=style.css.map*/

  • tantive-text-effects/trunk/dist/style.css.map

    r3326117 r3329317  
    1 {"version":3,"file":"style.css","mappings":"AACI,8DACI,kBACA,gBAEA,sEACI,WACA,kBACA,QACA,YACA,gGACA,MAIR,+DACI,4BAIA,8EACI,gEAGJ,uEACI,8DAKZ,qDACI,GACI,QACA,OACA,wBAEJ,IACI,WACA,OACA,wBAEJ,IACI,WACA,OACA,WAEJ,KACI,QACA,QACA,WAIR,8CACI,GACI,4BAEJ,KACI,yBAMJ,yBACI,qBACA,4BACA,UAIA,iCACI,4BACA,wBACA,sDACA,yDACA,6BACA,wBAKZ,wBACI,GACI,UACA,4BAEJ,IACI,UACA,0BAEJ,KACI,UACA,yBAMJ,yBACE,qBACA,4BACA,UAIA,iCACE,4BACA,wBACA,sDACA,yDACA,6BACA,wBAKR,wBACI,GACI,UACA,2BAEJ,IACI,UACA,2BAEJ,KACI,UACA,yBAMP,+BACC,qBACA,mBAIA,uCACC,sBACA,mCACA,wCAES,sDACI,8BAGJ,uDACI,+BAMhB,0BACC,GACI,0BAEF,IACE,mCACH,qFAED,IACC,0BACA,6EAEC,KACE,2BAIL,2BACC,GACI,0BAEF,IACE,mCACH,qFAEC,KACK,2BAIR,uBACC,kBACA,kBAEA,+BACC,WACA,kBACA,UACA,YACA,MACA,OACA,iDACA,4HACC,CAED,sBAGD,8BACC,WACA,kBACA,UACA,YACA,MACA,OACA,iDACA,UACA,yDAGD,+CACC,kBACA,kBACA,SACA,gFAIF,iCACC,GACC,OAED,KACC,WAIF,mCACC,GACC,UAED,KACC,WAIF,+BACC,GACC,WAIF,iCACC,GACC,4CAED,KACC,mDAKE,6CACI,kBACA,kBACA,mBACA,UACA,sDAEA,yGAEI,WACA,kBACA,YACA,UACA,MACA,8CACA,sBACA,uDAGJ,qDACI,OACA,uBAGJ,oDACI,QACA,0BAKR,+BACI,GACI,mBACA,UAEJ,GACI,mBACA,WAIR,4BACI,GACI,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,YAGJ,kEACI,mDACA,yCAGJ,iEACI,mDACA,yCAKJ,yIAEI,2DAKJ,yIAEI,2DAKJ,yIAEI,2DAKJ,yIAEI,2DAMhB,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,iDACA,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,wDAKZ,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,0DACA,WACA,uBAIF,6DACC,kBAKC,yEACC,yFAMJ,oCACC,GACC,0BAKE,qBACI,qBACA,UACA,mBAIA,6BACI,gEAKZ,0BACC,GACC,mBACA,iBACA,UAED,IACC,qBACA,UAED,KACC,mBACA,eACA,WAKD,oDACC,kBACA,kBACA,gBAEA,uHAEC,WACA,kBACA,WACA,WACA,uDAGD,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,0DACA,yCACA,yBAGD,qEACC,mBACA,WAGD,oEACC,mBACA,WAMA,yJAEC,gEAMJ,oCACC,GACC,0CAKD,6DACC,kBACA,kBAEA,yIAEC,WACA,kBACA,SACA,0DACA,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,Q","sources":["webpack://tantive-text-effects/./src/css/style.scss"],"sourcesContent":[".animSquareSlideInFromLeft {\r\n    .animSquareSlideInFromLeft__Square {\r\n        position: relative;\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: var(--tte-squareSlideInFromLeftRectangleColor, var(--tte-overallDefaultColor));\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    .animSquareSlideInFromLeft__content {\r\n        transform: translateX(-100%);\r\n    }\r\n        \r\n    &.visible {\r\n        & .animSquareSlideInFromLeft__Square::before {\r\n            animation: animSquareSlideInFromLeft__square--before 1s forwards;\r\n        }\r\n\r\n        & .animSquareSlideInFromLeft__content {\r\n            animation: animSquareSlideInFromLeft__content 0.2s 0.8s forwards;\r\n        }\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    30% {\r\n        width: 100%;\r\n        left: 0;\r\n        transform: translateX(0);\r\n    }\r\n    80% {\r\n        width: 100%;\r\n        left: 0;\r\n        right: 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    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    }\r\n    \r\n    &.visible {\r\n        .tteLetter { \r\n            animation-name: animWavyDrop;\r\n            animation-duration: 0.75s;\r\n            animation-delay: calc(0.1s * var(--animWavyDropDuration));\r\n            animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n            animation-fill-mode: forwards;\r\n            transform: translateY(0);\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    50% {\r\n        opacity: 1;\r\n        transform: translateY(30%);\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    }\r\n    \r\n    &.visible {\r\n      .tteLetter { \r\n        animation-name: animWavyRise;\r\n        animation-duration: 0.75s;\r\n        animation-delay: calc(0.1s * var(--animWavyRiseDuration));\r\n        animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n        animation-fill-mode: forwards;\r\n        transform: translateY(0);\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    50% {\r\n        opacity: 1;\r\n        transform: translateY(-30%);\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.animPopOut.visible {\r\n\t\r\n\t.tteLetter {\r\n\t\tdisplay: inline-block;\r\n\t\tmargin-right: 0.25em;\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.tteLetter {\r\n\t\t\tanimation-duration: 2s;\r\n\t\t\tanimation-iteration-count: infinite;\r\n\t\t\tanimation-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\t}\t\t\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 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\r\n  \t}\r\n\t75% {\r\n\t\ttransform: translate(0, 0);\r\n\t\ttext-shadow: 0 0  var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\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 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\r\n  \t}\r\n  \t100% {\r\n        transform: translate(0, 0);\r\n  \t}\r\n}\r\n\r\n.animLineSwipe.visible {\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: var(--tte-lineSwipeBorderColor);\r\n\t\tanimation:\r\n\t\t\tanimLineSwipeBarSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards,\r\n\t\t\tanimLineSwipeBarFadeOut 0.1s ease-in-out forwards;\r\n\t\tanimation-delay: 0s, 1s;\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: var(--tte-lineSwipeBorderColor);\r\n\t\topacity: 0;\r\n\t\tanimation: animLineSwipeBorder 2s 1s ease-in-out forwards;\r\n\t}\r\n\t\r\n\t.animLineSwipe__content {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\tmargin: 0;\r\n\t\tanimation: animLineSwipeContents 1s 0.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;\r\n\t}\r\n}\r\n\r\n@keyframes animLineSwipeBarSwipe {\r\n\t0% {\r\n\t\tleft: 0;\r\n\t}\r\n\t100% {\r\n\t\tleft: 100%;\r\n\t}\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\tto {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animLineSwipeContents {\r\n\t0% {\r\n\t\tclip-path: polygon(0 0, 0 100%, 0 100%, 0 0);\r\n\t}\r\n\t100% {\r\n\t\tclip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);\r\n\t}\t\r\n}\r\n\r\n.animGateMark.visible {\r\n    .animGateMark__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        transform: scale(0);\r\n        opacity:0;\r\n        animation: animGateMarkContent 1s ease-in-out forwards;\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: var(--tte-gateMarkLineColor);\r\n            transform: scale(0, 1);\r\n            animation: animGateMarkGate 0.5s 1s ease-in-out forwards;\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        to {\r\n            transform: scale(1);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    @keyframes animGateMarkGate {\r\n        to {\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            }\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        .animBorderSplitTrailT2B__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailt2bBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailB2T__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailb2tBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailL2R__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTraill2rBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailR2L__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailr2lBorderColor);\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: var(--tte-lineCurtainLineColor);\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 0.5s 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: var(--tte-halfBackgroundRotateBackgroundColor);\r\n\t\t\tz-index: -1;\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\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 0.5s 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 + 0.5s) 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: var(--tte-doubleLineSlideInLineColor);\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: var(--tte-accentUnderlineGrow1LineColor);\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: var(--tte-accentUnderlineGrow2LineColor);\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"],"names":[],"sourceRoot":""}
     1{"version":3,"file":"style.css","mappings":"AACI,8DACI,kBACA,gBAEA,sEACI,WACA,kBACA,QACA,YACA,gGACA,MAIR,+DACI,4BAIA,8EACI,gEAGJ,uEACI,8DAKZ,qDACI,GACI,QACA,OACA,wBAEJ,IACI,WACA,OACA,wBAEJ,IACI,WACA,OACA,WAEJ,KACI,QACA,QACA,WAIR,8CACI,GACI,4BAEJ,KACI,yBAMJ,yBACI,qBACA,4BACA,UAIA,iCACI,4BACA,wBACA,sDACA,yDACA,6BACA,wBAKZ,wBACI,GACI,UACA,4BAEJ,IACI,UACA,0BAEJ,KACI,UACA,yBAMJ,yBACE,qBACA,4BACA,UAIA,iCACE,4BACA,wBACA,sDACA,yDACA,6BACA,wBAKR,wBACI,GACI,UACA,2BAEJ,IACI,UACA,2BAEJ,KACI,UACA,yBAMP,+BACC,qBACA,mBAIA,uCACC,sBACA,mCACA,wCAES,sDACI,8BAGJ,uDACI,+BAMhB,0BACC,GACI,0BAEF,IACE,mCACH,qFAED,IACC,0BACA,6EAEC,KACE,2BAIL,2BACC,GACI,0BAEF,IACE,mCACH,qFAEC,KACK,2BAIR,uBACC,kBACA,kBAEA,+BACC,WACA,kBACA,UACA,YACA,MACA,OACA,iDACA,4HACC,CAED,sBAGD,8BACC,WACA,kBACA,UACA,YACA,MACA,OACA,iDACA,UACA,yDAGD,+CACC,kBACA,kBACA,SACA,gFAIF,iCACC,GACC,OAED,KACC,WAIF,mCACC,GACC,UAED,KACC,WAIF,+BACC,GACC,WAIF,iCACC,GACC,4CAED,KACC,mDAKE,6CACI,kBACA,kBACA,mBACA,UACA,sDAEA,yGAEI,WACA,kBACA,YACA,UACA,MACA,8CACA,sBACA,uDAGJ,qDACI,OACA,uBAGJ,oDACI,QACA,0BAKR,+BACI,GACI,mBACA,UAEJ,GACI,mBACA,WAIR,4BACI,GACI,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,YAGJ,kEACI,mDACA,yCAGJ,iEACI,mDACA,yCAKJ,yIAEI,2DAKJ,yIAEI,2DAKJ,yIAEI,2DAKJ,yIAEI,2DAMhB,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,iDACA,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,wDAKZ,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,0DACA,WACA,uBAIF,6DACC,kBAKC,yEACC,yFAMJ,oCACC,GACC,0BAKE,qBACI,qBACA,UACA,mBAIA,6BACI,gEAKZ,0BACC,GACC,mBACA,iBACA,UAED,IACC,qBACA,UAED,KACC,mBACA,eACA,WAKD,oDACC,kBACA,kBACA,gBAEA,uHAEC,WACA,kBACA,WACA,WACA,uDAGD,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,0DACA,yCACA,yBAGD,qEACC,mBACA,WAGD,oEACC,mBACA,WAMA,yJAEC,gEAMJ,oCACC,GACC,0CAKD,6DACC,kBACA,kBAEA,yIAEC,WACA,kBACA,SACA,0DACA,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,0DAGD,2CACC,mBACA,WACA,yCAGD,0CACC,WACA,YACA,kBACA,+BACA,UAIF,0CACC,GACC,0CAIF,yCACC,GACC,WAOC,6EACC,kEAGD,4EACC,+DAMJ,mCACC,kBACA,kBAEA,qFAEC,WACA,kBACA,SACA,SACA,0DAGD,2CACC,WACA,WACA,yCACA,uBAGD,0CACC,WACA,YACA,UACA,kBACA,0BACA,UAIF,0CACC,GACC,0CAIF,yCACC,aACA,WACA,eACA,cACA,eACA,yB","sources":["webpack://tantive-text-effects/./src/css/style.scss"],"sourcesContent":[".animSquareSlideInFromLeft {\r\n    .animSquareSlideInFromLeft__Square {\r\n        position: relative;\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: var(--tte-squareSlideInFromLeftRectangleColor, var(--tte-overallDefaultColor));\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    .animSquareSlideInFromLeft__content {\r\n        transform: translateX(-100%);\r\n    }\r\n        \r\n    &.visible {\r\n        & .animSquareSlideInFromLeft__Square::before {\r\n            animation: animSquareSlideInFromLeft__square--before 1s forwards;\r\n        }\r\n\r\n        & .animSquareSlideInFromLeft__content {\r\n            animation: animSquareSlideInFromLeft__content 0.2s 0.8s forwards;\r\n        }\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    30% {\r\n        width: 100%;\r\n        left: 0;\r\n        transform: translateX(0);\r\n    }\r\n    80% {\r\n        width: 100%;\r\n        left: 0;\r\n        right: 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    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    }\r\n    \r\n    &.visible {\r\n        .tteLetter { \r\n            animation-name: animWavyDrop;\r\n            animation-duration: 0.75s;\r\n            animation-delay: calc(0.1s * var(--animWavyDropDuration));\r\n            animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n            animation-fill-mode: forwards;\r\n            transform: translateY(0);\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    50% {\r\n        opacity: 1;\r\n        transform: translateY(30%);\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    }\r\n    \r\n    &.visible {\r\n      .tteLetter { \r\n        animation-name: animWavyRise;\r\n        animation-duration: 0.75s;\r\n        animation-delay: calc(0.1s * var(--animWavyRiseDuration));\r\n        animation-timing-function:cubic-bezier(.42,0,.33,1);\r\n        animation-fill-mode: forwards;\r\n        transform: translateY(0);\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    50% {\r\n        opacity: 1;\r\n        transform: translateY(-30%);\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.animPopOut.visible {\r\n\t\r\n\t.tteLetter {\r\n\t\tdisplay: inline-block;\r\n\t\tmargin-right: 0.25em;\r\n\t}\r\n\t\r\n\t&.visible {\r\n\t\t.tteLetter {\r\n\t\t\tanimation-duration: 2s;\r\n\t\t\tanimation-iteration-count: infinite;\r\n\t\t\tanimation-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\t}\t\t\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 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\r\n  \t}\r\n\t75% {\r\n\t\ttransform: translate(0, 0);\r\n\t\ttext-shadow: 0 0  var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\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 var(--tte-popOutShadowColor, var(--tte-overallDefaultColor));\r\n  \t}\r\n  \t100% {\r\n        transform: translate(0, 0);\r\n  \t}\r\n}\r\n\r\n.animLineSwipe.visible {\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: var(--tte-lineSwipeBorderColor);\r\n\t\tanimation:\r\n\t\t\tanimLineSwipeBarSwipe 1s cubic-bezier(0.77, 0, 0.175, 1) forwards,\r\n\t\t\tanimLineSwipeBarFadeOut 0.1s ease-in-out forwards;\r\n\t\tanimation-delay: 0s, 1s;\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: var(--tte-lineSwipeBorderColor);\r\n\t\topacity: 0;\r\n\t\tanimation: animLineSwipeBorder 2s 1s ease-in-out forwards;\r\n\t}\r\n\t\r\n\t.animLineSwipe__content {\r\n\t\tposition: relative;\r\n\t\twidth: fit-content;\r\n\t\tmargin: 0;\r\n\t\tanimation: animLineSwipeContents 1s 0.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;\r\n\t}\r\n}\r\n\r\n@keyframes animLineSwipeBarSwipe {\r\n\t0% {\r\n\t\tleft: 0;\r\n\t}\r\n\t100% {\r\n\t\tleft: 100%;\r\n\t}\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\tto {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animLineSwipeContents {\r\n\t0% {\r\n\t\tclip-path: polygon(0 0, 0 100%, 0 100%, 0 0);\r\n\t}\r\n\t100% {\r\n\t\tclip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);\r\n\t}\t\r\n}\r\n\r\n.animGateMark.visible {\r\n    .animGateMark__content {\r\n        position: relative;\r\n        width: fit-content;\r\n        transform: scale(0);\r\n        opacity:0;\r\n        animation: animGateMarkContent 1s ease-in-out forwards;\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: var(--tte-gateMarkLineColor);\r\n            transform: scale(0, 1);\r\n            animation: animGateMarkGate 0.5s 1s ease-in-out forwards;\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        to {\r\n            transform: scale(1);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    @keyframes animGateMarkGate {\r\n        to {\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            }\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        .animBorderSplitTrailT2B__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailt2bBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailB2T__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailb2tBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailL2R__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTraill2rBorderColor);\r\n            }\r\n        }\r\n\r\n        .animBorderSplitTrailR2L__wrap {\r\n            &::before,\r\n            &::after {\r\n                background-color: var(--tte-borderSplitTrailr2lBorderColor);\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: var(--tte-lineCurtainLineColor);\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 0.5s 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: var(--tte-halfBackgroundRotateBackgroundColor);\r\n\t\t\tz-index: -1;\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\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 0.5s 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 + 0.5s) 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: var(--tte-doubleLineSlideInLineColor);\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: var(--tte-accentUnderlineGrow1LineColor);\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: var(--tte-accentUnderlineGrow2LineColor);\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: var(--tte-accentUnderlineGrow3LineColor);\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\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: var(--tte-accentUnderlineGrow4LineColor);\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"],"names":[],"sourceRoot":""}

  • tantive-text-effects/trunk/lib/menu/admin_menu.php

    r3326117 r3329317  
    9191        'menu-accent-underline-grow1.php',
    9292        'menu-accent-underline-grow2.php',
     93        'menu-accent-underline-grow3.php',
     94        'menu-accent-underline-grow4.php',
    9395    ];
    9496
    … …  
    231233    }
    232234
     235    if ( isset( $data->accentUnderlineGrow3->underlineColor ) ) {
     236
     237        $underline_color = ttef_sanitize_color( $data->accentUnderlineGrow3->underlineColor );
     238        update_option( 'tantive_text_effects_accent_underline_grow3_line_color', $underline_color != null ? $underline_color : "#dd9933" );
     239
     240    }
     241
     242    if ( isset( $data->accentUnderlineGrow4->underlineColor ) ) {
     243
     244        $underline_color = ttef_sanitize_color( $data->accentUnderlineGrow4->underlineColor );
     245        update_option( 'tantive_text_effects_accent_underline_grow4_line_color', $underline_color != null ? $underline_color : "#dd9933" );
     246
     247    }
     248
    233249    $rtn = rest_ensure_response ( [
    234250        'success' => true,

  • tantive-text-effects/trunk/lib/menu/usage.php

    r3326117 r3329317  
    205205        ],
    206206        [
     207            'template' => 'half-background-rotate.php',
     208            'title' => 'HalfBackgroundRotate',
     209            'jp' => [
     210                'コンテンツの一部に修飾を付けても基本的に崩れません',
     211                '実際のアニメ表示は繰り返さず1回だけです',
     212                '設定画面でラインの色を設定できます',
     213            ],
     214            'en_US' => [
     215                'Applying decorations to part of the content generally does not break the layout.',
     216                'The actual animation plays only once and does not repeat.',
     217                'You can set the line color in the settings menu.',
     218            ],
     219        ],
     220        [
    207221            'template' => 'flip-cascade.php',
    208222            'title' => 'FlipCascade',
    … …  
    277291            'template' => 'accent-underline-grow2.php',
    278292            'title' => 'AccentUnderlineGrow2',
     293            'jp' => [
     294                'コンテンツの一部に修飾を付けても基本的に崩れません',
     295                '実際のアニメ表示は繰り返さず1回だけです',
     296                '設定画面でアンダーラインの色を設定できます',
     297            ],
     298            'en_US' => [
     299                'Applying decorations to part of the content generally does not break the layout.',
     300                'The actual animation plays only once and does not repeat.',
     301                'You can set the underline color in the settings menu.',
     302            ],
     303        ],
     304        [
     305            'template' => 'accent-underline-grow3.php',
     306            'title' => 'AccentUnderlineGrow3',
     307            'jp' => [
     308                'コンテンツの一部に修飾を付けても基本的に崩れません',
     309                '実際のアニメ表示は繰り返さず1回だけです',
     310                '設定画面でアンダーラインの色を設定できます',
     311            ],
     312            'en_US' => [
     313                'Applying decorations to part of the content generally does not break the layout.',
     314                'The actual animation plays only once and does not repeat.',
     315                'You can set the underline color in the settings menu.',
     316            ],
     317        ],
     318        [
     319            'template' => 'accent-underline-grow4.php',
     320            'title' => 'AccentUnderlineGrow4',
    279321            'jp' => [
    280322                'コンテンツの一部に修飾を付けても基本的に崩れません',
    … …  
    527569                        <td><p><?php echo esc_html( $current_locale == 'ja' ? 'すべてのaccentUnderlineGrow2のアンダーライン色に反映されます' : 'The underline color will be applied to all accentUnderlineGrow2 effects.' ) ?></p></td>
    528570                    </tr>
     571                    <tr>
     572                        <th><p><?php echo esc_html( $current_locale == 'ja' ? 'accent underline grow3（アクセントアンダーライン３設定）' : 'AccentUnderlineGrow3 Settings' ) ?></p></th>
     573                        <td><p><?php echo esc_html( $current_locale == 'ja' ? 'アンダーライン色' : 'Color of underline' ) ?></p></td>
     574                        <td><p><?php echo esc_html( $current_locale == 'ja' ? 'すべてのaccentUnderlineGrow3のアンダーライン色に反映されます' : 'The underline color will be applied to all accentUnderlineGrow3 effects.' ) ?></p></td>
     575                    </tr>
     576                    <tr>
     577                        <th><p><?php echo esc_html( $current_locale == 'ja' ? 'accent underline grow4（アクセントアンダーライン４設定）' : 'AccentUnderlineGrow4 Settings' ) ?></p></th>
     578                        <td><p><?php echo esc_html( $current_locale == 'ja' ? 'アンダーライン色' : 'Color of underline' ) ?></p></td>
     579                        <td><p><?php echo esc_html( $current_locale == 'ja' ? 'すべてのaccentUnderlineGrow4のアンダーライン色に反映されます' : 'The underline color will be applied to all accentUnderlineGrow4 effects.' ) ?></p></td>
     580                    </tr>
    529581                </table>
    530582            </div>

  • tantive-text-effects/trunk/readme.txt

    r3326119 r3329317  
    66Requires at least: 6.8
    77Requires PHP:      8.2
    8 Stable tag:        1.0.10
     8Stable tag:        1.0.11
    99License:           GPL-2.0-or-later
    1010License URI:       https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    4646== Changelog ==
    4747
     48= 1.0.11 ==
     49* Added two new block patterns
    4850= 1.0.10 ==
    4951* Added two new block patterns

  • tantive-text-effects/trunk/tantive-text-effects.php

    r3326117 r3329317  
    66 * Requires at least: 6.8
    77 * Requires PHP:      8.2
    8  * Version:           1.0.10
     8 * Version:           1.0.11
    99 * Author:            Junichi Takanashi
    1010 * License:           GPL-2.0-or-later
    … …  
    4141    delete_option( 'tantive_text_effects_accent_underline_grow1_line_color' );
    4242    delete_option( 'tantive_text_effects_accent_underline_grow2_line_color' );
     43    delete_option( 'tantive_text_effects_accent_underline_grow3_line_color' );
     44    delete_option( 'tantive_text_effects_accent_underline_grow4_line_color' );
    4345}
    4446register_uninstall_hook( __FILE__, __NAMESPACE__ . '\ttef_text_effects_uninstall' );
    … …  
    236238                'categories' => ['tte'],
    237239                'filePath' => TANTIVE_TEXT_EFFECTS_DIR . '/assets/pattern/accent-underline-grow2.md',
     240            ]
     241        ],
     242        [
     243            'title' => TANTIVE_TEXT_EFFECTS_PATTERN_NAME_SPACE . '/' . 'accent-underline-grow3',
     244            'pattern' => [
     245                'title' => 'Accent Underline Grow3',
     246                'description' => 'A dot and bold bar smoothly expand from the center for a stylish reveal.',
     247                'categories' => ['tte'],
     248                'filePath' => TANTIVE_TEXT_EFFECTS_DIR . '/assets/pattern/accent-underline-grow3.md',
     249            ]
     250        ],
     251        [
     252            'title' => TANTIVE_TEXT_EFFECTS_PATTERN_NAME_SPACE . '/' . 'accent-underline-grow4',
     253            'pattern' => [
     254                'title' => 'Accent Underline Grow4',
     255                'description' => 'dots and bold bar smoothly expand from the center for a stylish reveal.',
     256                'categories' => ['tte'],
     257                'filePath' => TANTIVE_TEXT_EFFECTS_DIR . '/assets/pattern/accent-underline-grow4.md',
    238258            ]
    239259        ],
    … …  
    298318    $tte_accent_underline_grow2_line_color = get_option( 'tantive_text_effects_accent_underline_grow2_line_color' );
    299319    $tte_accent_underline_grow2_line_color = $tte_accent_underline_grow2_line_color ? $tte_accent_underline_grow2_line_color : $tte_over_all_default_color;
     320    $tte_accent_underline_grow3_line_color = get_option( 'tantive_text_effects_accent_underline_grow3_line_color' );
     321    $tte_accent_underline_grow3_line_color = $tte_accent_underline_grow3_line_color ? $tte_accent_underline_grow3_line_color : $tte_over_all_default_color;
     322    $tte_accent_underline_grow4_line_color = get_option( 'tantive_text_effects_accent_underline_grow4_line_color' );
     323    $tte_accent_underline_grow4_line_color = $tte_accent_underline_grow4_line_color ? $tte_accent_underline_grow4_line_color : $tte_over_all_default_color;
    300324
    301325    $internal_style = esc_html(
    … …  
    317341            --tte-accentUnderlineGrow1LineColor:' . $tte_accent_underline_grow1_line_color . ';
    318342            --tte-accentUnderlineGrow2LineColor:' . $tte_accent_underline_grow2_line_color . ';
     343            --tte-accentUnderlineGrow3LineColor:' . $tte_accent_underline_grow3_line_color . ';
     344            --tte-accentUnderlineGrow4LineColor:' . $tte_accent_underline_grow4_line_color . ';
    319345        }
    320346        '
Note: See TracChangeset for help on using the changeset viewer.