/* Styles for the NCEL Cash Pop animation */ /* ============================== */ /* Global Reset for animation & text */ /* ============================== */ #CashPopAnimation * { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* ============================== */ /* Animation Container */ /* ============================== */ /* Style for the popup */ #CashPopAnimation { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgb(240, 96, 196); background: radial-gradient(circle, rgba(240, 96, 196, 1) 0%, rgba(152, 26, 95, 1) 100%); margin: 0 auto; max-width: clamp(300px, 90vh, 720px); width: 90%; max-height: clamp(300px, 90vh, 720px); overflow: hidden; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); z-index: 800; /* Ensure it's on top */ } #CashPopAnimation #close { position: absolute; width: 50px; height: 50px; display: block; top: 10px; right: 10px; cursor: pointer; transition: all ease .25s; z-index: 50; border-radius: 25px; background-color: transparent; } #CashPopAnimation #close:hover { transform: rotate(90deg); background-color: #ffffff; } #CashPopAnimation #close::before, #CashPopAnimation #close::after { content: ''; position: absolute; width: 40px; height: 3px; border-radius: 3px; display: block; background-color: #fff; transition: all ease .25s; transform: translate(-50%, -50%) rotate(45deg); top: 50%; left: 50%; } #CashPopAnimation #close::after { transform: translate(-50%, -50%) rotate(-45deg); } #CashPopAnimation #close:hover::after, #CashPopAnimation #close:hover::before { background-color: #000; } @media screen and (max-width: 768px) { #CashPopAnimation #close { position: absolute; width: 40px; height: 40px; } #CashPopAnimation #close::before, #CashPopAnimation #close::after { width: 30px; } } /* ============================== */ /* Intro Section */ /* ============================== */ #CashPopAnimation #intro { position: absolute; color: #fff; font-size: 2em; opacity: 1; transition: opacity 1s ease-out; aspect-ratio: 1/1; width: 100%; } /* Targets only the balls in the intro lockup */ #CashPopAnimation #intro .balls { display: flex; width: 100%; height: 100%; flex-wrap: wrap; position: absolute; top: 27.5%; gap: 10%; z-index: 0; } /* ============================== */ /* Container Styles */ /* ============================== */ #CashPopAnimation #container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: auto; transition: transform 1s ease; position: relative; aspect-ratio: 1/1; padding: 15% 5% 5%; max-width: 100%; box-sizing: border-box; gap: 3%; transform: translate(0,120%); } /* declaration that pulls the game balls into frame when the show class is added */ #CashPopAnimation #container.show { transform: translate(0,0); } /* ============================== */ /* Fireworks Animations */ /* ============================== */ #CashPopAnimation #container.fireworks .ballWrapper::before { animation: explodeTransformloop 2s cubic-bezier(0.16, 1, 0.3, 1) forwards infinite 1s, explodeOpacityloop 2s linear forwards infinite 1s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(1)::before { animation-delay: .2s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(2)::before { animation-delay: 1.8s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(3)::before { animation-delay: 1.67s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(4)::before { animation-delay: .65s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(5)::before { animation-delay: .75s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(6)::before { animation-delay: 4.5s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(7)::before { animation-delay: 5.65s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(8)::before { animation-delay: 1.8s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(9)::before { animation-delay: 3.25s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(10)::before { animation-delay: 2.2s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(11)::before { animation-delay: 3.1s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(12)::before { animation-delay: 2.27s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(13)::before { animation-delay: 3.75s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(14)::before { animation-delay: 2.4s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(15)::before { animation-delay: 3.85s; } #CashPopAnimation #container.fireworks .ballWrapper:nth-child(16)::before { animation-delay: 3.15s; } /* ============================== */ /* Ball Styles */ /* ============================== */ #CashPopAnimation .cpball { display: flex; position: relative; align-items: center; justify-content: center; border-radius: 50%; color: #010101; font-weight: bold; transition: all ease 0.5s; background-image: url(img/whiteball.png); background-size: contain; background-position: center; gap: 10px; background-repeat: no-repeat; margin: 10px; transition: all ease .25s; font-size: var(--font-size); width: 100%; height: 100%; z-index: 2; /* necessarry for text stroke */ text-shadow: -3px -3px 0 #fff, -3px -2px 0 #fff, -3px -1px 0 #fff, -3px 0px 0 #fff, -3px 1px 0 #fff, -3px 2px 0 #fff, -3px 3px 0 #fff, -2px -3px 0 #fff, -2px -2px 0 #fff, -2px -1px 0 #fff, -2px 0px 0 #fff, -2px 1px 0 #fff, -2px 2px 0 #fff, -2px 3px 0 #fff, -1px -3px 0 #fff, -1px -2px 0 #fff, -1px -1px 0 #fff, -1px 0px 0 #fff, -1px 1px 0 #fff, -1px 2px 0 #fff, -1px 3px 0 #fff, 0px -3px 0 #fff, 0px -2px 0 #fff, 0px -1px 0 #fff, 0px 0px 0 #fff, 0px 1px 0 #fff, 0px 2px 0 #fff, 0px 3px 0 #fff, 1px -3px 0 #fff, 1px -2px 0 #fff, 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff, 1px 2px 0 #fff, 1px 3px 0 #fff, 2px -3px 0 #fff, 2px -2px 0 #fff, 2px -1px 0 #fff, 2px 0px 0 #fff, 2px 1px 0 #fff, 2px 2px 0 #fff, 2px 3px 0 #fff, 3px -3px 0 #fff, 3px -2px 0 #fff, 3px -1px 0 #fff, 3px 0px 0 #fff, 3px 1px 0 #fff, 3px 2px 0 #fff, 3px 3px 0 #fff; font-family: "Arvo", serif; font-weight: 700; font-style: normal; } #CashPopAnimation .ballWrapper:nth-of-type(2n) .cpball { background-image: url(img/yellowball.png); } #CashPopAnimation .cpball.hidden { opacity: 0; transition: all cubic-bezier(0.36, 0, 0.66, -0.56) .25; } #CashPopAnimation .pop .cpball { transform: scale(1.5); opacity: 0; animation-delay: 0s; } /* this stops the fireworks from drifting at the end of the show */ #CashPopAnimation #container.fireworks .ballWrapper { animation: none; transition: all ease .5s; } /* ============================== */ /* Ball Wrapper Styles */ /* ============================== */ #CashPopAnimation .ballWrapper { position: relative; z-index: 0; width: var(--size); height: var(--size); margin-top: var(--margin-top); margin-left: var(--margin-left); flex-grow: var(--flex-grow); order: var(--order); animation: randomMove var(--animation-duration) ease infinite; } #CashPopAnimation .ballWrapper:nth-last-of-type(odd) { animation-direction: reverse; } #CashPopAnimation .ballWrapper.hidden, #CashPopAnimation .ballWrapper.hidden::before { display: none; } /* Firework art */ #CashPopAnimation .ballWrapper::before { content: ''; position: absolute; width: 100%; height: 100%; display: block; z-index: 0; background-image: url(img/fireworks_0.png); background-repeat: no-repeat; background-position: center; background-size: contain; left: 50%; top: 50%; opacity: 0; animation-delay: none; transform: translate(-50%, -50%) scale(0.25); } #CashPopAnimation .ballWrapper.pop::before { animation: explodeTransform .65s cubic-bezier(0.16, 1, 0.3, 1) forwards, explodeOpacity .5s linear forwards; } /* ============================== */ /* Ball Wrapper Backgrounds */ /* ============================== */ #CashPopAnimation .ballWrapper:nth-child(6n+1)::before { background-image: url('img/fireworks_0.png'); } #CashPopAnimation .ballWrapper:nth-child(6n+2)::before { background-image: url('img/fireworks_1.png'); } #CashPopAnimation .ballWrapper:nth-child(6n+3)::before { background-image: url('img/fireworks_2.png'); } #CashPopAnimation .ballWrapper:nth-child(6n+4)::before { background-image: url('img/fireworks_3.png'); } #CashPopAnimation .ballWrapper:nth-child(6n+5)::before { background-image: url('img/fireworks_4.png'); } #CashPopAnimation .ballWrapper:nth-child(6n+6)::before { background-image: url('img/fireworks_5.png'); } /* ============================== */ /* Winner Styles */ /* ============================== */ #CashPopAnimation .winner { width: 75%; height: 50%; position: absolute; left: 50%; top: 20%; transform: translate(-50%, 0%) scale(.01); background-image: url(img/Winner.png); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0; z-index: 10; transition: all cubic-bezier(0.34, 1.56, 0.64, 1) .75s .25s; } /* animates the winner text when active class is applied */ #CashPopAnimation .winner.active { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* ============================== */ /* Cash Pop Ball Styles */ /* ============================== */ #CashPopAnimation .cashPop { position: absolute; width: 60%; aspect-ratio: 1/1; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } /* background ball element for cashpop */ #CashPopAnimation .cashPop::after { content: ''; position: absolute; width: 100%; height: 100%; display: block; z-index: 0; background-image: url(img/whiteball.png); background-size: contain; background-position: center; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; transition: all ease .55s; } /* Firework element for cashpop lockup */ #CashPopAnimation .cashPop::before { content: ''; position: absolute; width: 100%; height: 100%; display: block; z-index: 0; background-image: url(img/cashFireWork.png); background-repeat: no-repeat; background-position: center; background-size: contain; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.01); opacity: 0; } /* animation states for when the 'pop' class is applied and the CP lockup needs to animate out */ #CashPopAnimation .cashPop.pop::after { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } #CashPopAnimation .cashPop.pop::before { animation: explodeTransformloopRotate 4s cubic-bezier(0.16, 1, 0.3, 1) forwards .15s, explodeOpacityloop 4s linear forwards .15s; } #CashPopAnimation .cashPop img { width: 80%; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; animation: fade .5s ease-in-out forwards 2.5s; } /* ============================== */ /* Final Wrap Styles */ /* ============================== */ #CashPopAnimation .ballWrapper.finalWrap.active .winner { animation: grow-up ease 0.5s forwards, float-center 3s ease-in-out infinite 0.5s; } #CashPopAnimation .cpball.final { transition: all 0.5s ease; margin: 0; top: 50%; left: 50%; z-index: 2; max-width: 40%; } #CashPopAnimation .cpball.final span { position: relative; z-index: 2; } #CashPopAnimation .finalWrap { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; } #CashPopAnimation .ballWrapper.finalWrap::before { display: none; } #CashPopAnimation .finalWrap.active::before, .finalWrap.active::after { content: ''; position: absolute; width: 60%; height: 45%; display: block; z-index: 0; background-repeat: no-repeat; background-position: center; background-size: contain; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.01); opacity: 0; animation: explodeTransformloopRotate 4.5s cubic-bezier(0.16, 1, 0.3, 1) forwards infinite, explodeOpacityloop 4.5s linear forwards infinite !important; } #CashPopAnimation .finalWrap.active::before { background-image: url(img/cashFW-2.png); animation-delay: 0.4s; } #CashPopAnimation .finalWrap.active::after { background-image: url(img/cashFW-1.png); animation-delay: 0.6s; } /* ============================== */ /* Final Values Bar */ /* ============================== */ #CashPopAnimation #final-values { position: absolute; width: 100%; bottom: 0; left: 50%; transition: all ease 0.5s; transform: translate(-50%, 150%); z-index: 5; color: #000; font-family: 'Arvo', 'odudo', serif; font-weight: 700; } #CashPopAnimation #final-values.active { transform: translate(-50%, 0); } #CashPopAnimation #final-values .content { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; width: 55%; border: solid 8px #fdca2a; border-radius: 25px; background: #fff; box-sizing: border-box; margin: 0 auto 5px; } #CashPopAnimation #final-values .content span { display: block; } #CashPopAnimation #final-values .content div { width: 50%; border-right: solid 1px #000; margin: 10px 0; } #CashPopAnimation #final-values .content div:last-of-type { border-right: none; } #CashPopAnimation #final-values .content::before, #CashPopAnimation #final-values .content::after { content: ''; position: absolute; width: 12%; height: 110%; top: -55%; background-size: contain; background-position: center; background-repeat: no-repeat; } #CashPopAnimation #final-values .content::before { left: -8%; background-image: url(img/corner-topleft.svg); } #CashPopAnimation #final-values .content::after { right: -8%; background-image: url(img/corner-topright.svg); width: 18%; } /* ============================== */ /* Final Values Background Art */ /* ============================== */ #CashPopAnimation #final-values .backgroundArt { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-bottom: solid 15px #fdca2a; } #CashPopAnimation #final-values .backgroundArt::before, #CashPopAnimation #final-values .backgroundArt::after { content: ''; position: absolute; width: 22.5%; height: 40%; bottom: -10px; z-index: 0; border: 12px solid #fdca2a; border-radius: 0 0 25px; border-top: none; border-left: none; } #CashPopAnimation #final-values .backgroundArt::after { right: 0; left: unset; border-right: none; border-radius: 0 25px; border-left: 12px solid #fdca2a; } @media screen and (max-width: 768px) { #CashPopAnimation #final-values .content { width: 90%; } #CashPopAnimation #final-values .backgroundArt::before, #CashPopAnimation #final-values .backgroundArt::after { width: 5%; } } /* ============================== */ /* Keyframe Animations */ /* ============================== */ @keyframes grow-up { 0% { opacity: 0; transform: translate(-50%, -5%) scale(.01); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes explodeTransform { 0% { transform: translate(-50%, -50%) scale(0.25); } 100% { transform: translate(-50%, -50%) scale(1.75); } } @keyframes explodeOpacity { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes explodeTransformloop { 0% { transform: translate(-50%, -50%) scale(0.01); } 15.75% { transform: translate(-50%, -50%) scale(1.55); } 100% { transform: translate(-50%, -50%) scale(1.55); } } @keyframes explodeTransformloopRotate { 0% { transform: translate(-50%, -50%) scale(0.01) rotate(0deg); } 30% { transform: translate(-50%, -50%) scale(1.75) rotate(25deg); } 100% { transform: translate(-50%, -50%) scale(1.75); } } @keyframes explodeOpacityloop { 0% { opacity: 0; } 5% { opacity: 1; } 15% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @keyframes float-center { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -45%); } 100% { transform: translate(-50%, -50%); } } @keyframes randomMove { 0% { transform: translate(0, 0); } 25% { transform: translate(-20%, 35%); } 50% { transform: translate(40%, -20%); } 75% { transform: translate(-30%, -30%); } 100% { transform: translate(0, 0); } } @keyframes randomMoveCenter { 0% { transform: translate(0%, 0%); } 25% { transform: translate(-20%, 35%); } 50% { transform: translate(40%, -20%); } 75% { transform: translate(-30%, -30%); } 100% { transform: translate(-50%, -50%); } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }