// @use '../utils/variables' as V
@use '../utils/mixin' as M 
@use "sass:string"     

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */

@include M.keyframe(tracking-in-expand)
    0% 
        letter-spacing: -0.2em
        opacity: 0
    40%
        opacity: 0.6    
    100%
        opacity: 1    
/**
 * ----------------------------------------
 * animation tracking-out-expand
 * ----------------------------------------
 */

@include M.keyframe(tracking-out-expand)
    0% 
        letter-spacing: -0.2em
        opacity: 1
    40%
        opacity: 0.6    
    100%
        opacity: 0   
/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */

@include M.keyframe(tracking-in-contract)
    0% 
        letter-spacing: 1em
        opacity: 0
    40%
        opacity: 0.6    
    100%
        letter-spacing: normal
        opacity: 1    
/**
 * ----------------------------------------
 * animation tracking-out-contract
 * ----------------------------------------
 */

@include M.keyframe(tracking-out-contract)
    0% 
        letter-spacing: 1em
        opacity: 1
    40%
        opacity: 0.6    
    100%
        letter-spacing: normal
        opacity: 0   

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-top
 * ----------------------------------------
 */

@include M.keyframe(tracking-in-contract-bck-top)
    0% 
        letter-spacing: 1em
        @include M.vendor-prefix('transform',translateZ(260px) translateY(-60px))
    40%
        opacity: 0.6    
    100%
        @include M.vendor-prefix('transform',translateZ(0) translateY(0))
        opacity: 1
/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-btn
 * ----------------------------------------
 */

@include M.keyframe(tracking-in-contract-bck-btn)
    0% 
        letter-spacing: 1em
        @include M.vendor-prefix('transform',translateZ(260px) translateY(60px))
    40%
        opacity: 0.6    
    100%
        @include M.vendor-prefix('transform',translateZ(0) translateY(0))
        opacity: 1

/**
 * ----------------------------------------
 * animation swing-top
 * ----------------------------------------
 */    

@include M.keyframe(swing-top)
    0% 
        @include M.vendor-prefix('transform',rotateX(180deg))  
        @include M.vendor-prefix('transform-origin',top)  
    100%
        @include M.vendor-prefix('transform',rotateX(0))  
        @include M.vendor-prefix('transform-origin',top) 
/**
 * ----------------------------------------
 * animation swing-btn
 * ----------------------------------------
 */    

@include M.keyframe(swing-btn)
    0% 
        @include M.vendor-prefix('transform',rotateX(-180deg))  
        @include M.vendor-prefix('transform-origin',bottom)  
    100%
        @include M.vendor-prefix('transform',rotateX(0))  
        @include M.vendor-prefix('transform-origin',bottom) 

/**
 * ----------------------------------------
 * animation shadow-drop
 * ----------------------------------------
 */

@include M.keyframe(shadow-drop)
    0% 
        @include M.vendor-prefix('box-shadow',0 0 0 0 rgba(0, 0, 0, 0))    
    100%
        @include M.vendor-prefix('box-shadow',0 0 20px 0px rgba(0, 0, 0, 0.35))     

/**
 * ----------------------------------------
 * animation shadow-inset
 * ----------------------------------------
 */

@include M.keyframe(shadow-inset)
    0% 
        @include M.vendor-prefix('box-shadow',inset 0 0 0 0 rgba(0, 0, 0, 0))        
    100%
        @include M.vendor-prefix('box-shadow',inset 0 0 14px 0px rgba(0, 0, 0, 0.5))     

/**
 * ----------------------------------------
 * animation text-focus-in
 */

@include M.keyframe(text-focus-in)
    0% 
        @include M.vendor-prefix('filter',blur(12px))
        opacity: 0        
    100%
        @include M.vendor-prefix('filter',blur(0px))    
        opacity: 1    
/**
 * ----------------------------------------
 * animation text-focus-out
 */

@include M.keyframe(text-focus-out)
    0% 
        @include M.vendor-prefix('filter',blur(0.01))
        opacity: 1        
    100%
        @include M.vendor-prefix('filter',blur(12px))    
        opacity: 0    

/**
 * ----------------------------------------
 * animation text-flicker
 */

@include M.keyframe(text-flicker)
    0%
        opacity: 0
    10%
        opacity: 0
        text-shadow: none
    10.1%
        opacity: 1
        text-shadow: none
    10.2%
        opacity: 0
        text-shadow: none
    20% 
        opacity: 0
        text-shadow: none
    20.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.25)
    20.6%
        opacity: 0
        text-shadow: none
    30%
        opacity: 0
        text-shadow: none
    30.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)
    30.5%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)
    30.6%
        opacity: 0
        text-shadow: none
    45%
        opacity: 0
        text-shadow: none
    45.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)
    50%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)
    55%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25)
    55.1%
        opacity: 0
        text-shadow: none
    57%
        opacity: 0
        text-shadow: none
    57.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35)
    60%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35)
    60.1%
        opacity: 0
        text-shadow: none
    65%
        opacity: 0
        text-shadow: none
    65.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1)
    75%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1)
    75.1%
        opacity: 0
        text-shadow: none
    77%
        opacity: 0
        text-shadow: none
    77.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1)
    85%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1)
    85.1%
        opacity: 0
        text-shadow: none
    86%
        opacity: 0
        text-shadow: none
    86.1%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1)
    100%
        opacity: 1
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1)

/**
 * ----------------------------------------
 * animation text-shadow-drop
 */

@include M.keyframe(text-shadow-drop)
    0% 
        text-shadow: 0 0 0 rgba(0, 0, 0, 0)        
    100%
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.35)