/*=============================================================== Vh-to-px ===============================================================*/ /* In your global CSS or root styles */ :root { --vh-in-px: 1vh; /* Fallback: uses regular vh until JS updates it */ } /*=============================================================== BUNNY BG VIDEO ===============================================================*/ /* Animation */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder { opacity: 0; visibility: hidden; } /* Play/Pause */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg { display: none; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg { display: block; } /* Loading */ [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /*=============================================================== BOUNCY BUTTON ===============================================================*/ :root { --ease-elastic: linear(0, 0.55 7.5%, 0.85 12%, 0.95 14%, 1.03 16.5%, 1.09 20%, 1.13 22%, 1.14 23%, 1.15 24.5%, 1.15 26%, 1.13 28%, 1.11 31%, 1.05 39%, 1.02 43%, 0.99 47%, 0.98 52%, 0.97 59%, 1.002 81%, 1); } /* Only apply hover animations if they are actually not supported */ @media (hover:hover) and (pointer:fine) { .btn-bounce, .btn-bounce-text, .btn-bounce-text__wrap { transition: transform 1s var(--ease-elastic); } /* Fake a duplicate text element using text shadow without blur */ /* We save the distance in a variable for easy use in the CSS animation */ .btn-bounce-text { --text-duplicate-distance: 3em; text-shadow: 0px var(--text-duplicate-distance) currentColor; } /* Scale down the button and rotate it slightly */ .btn-bounce:hover { transform: scale(0.92) rotate(-3deg); } /* Rotate the text wrapper in the opposite direction so it appears straight */ .btn-bounce:hover .btn-bounce-text__wrap { transform: rotate(3deg); } /* Move up the text span to reveal its text-shadow */ .btn-bounce:hover .btn-bounce-text { transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); } .btn-bounce:hover .btn-bounce-bg { border-radius: 10em; background-color: #4a4244; } } /*===============================================================*/ /*FALLING ICE*/ /*===============================================================*/ #canvas-target canvas { position: relative; top: -1px; left: -1px; right: -1px; bottom: -1px; max-width: unset; pointer-events: all; max-width: calc(100% + 2px); max-height: calc(100% + 2px); min-width: calc(100% + 2px); min-height: calc(100% + 2px); } /*===============================================================*/ /*WIGGLE BUTTON*/ /*===============================================================*/ @keyframes sprite { to { transform: translateX(-100%); } } [data-sprite] .btn-stop-motion__icon-svg { animation: sprite 0.45s steps(4, end) infinite; } [data-sprite]:hover .btn-stop-motion__back-svg { animation: sprite 0.45s steps(3, end) infinite; } /* --- Wiggle Animation --- */ @keyframes wiggle { from { transform: rotate(1deg); } to { transform: rotate(-1deg); } } [data-wiggle]:hover [data-wiggle-target] { animation: wiggle 0.3s steps(2, end) infinite; } /* --- Scale Animation (Extra) --- */ /*===============================================================*/ /*MOTION BUTTON*/ /*===============================================================*/ .btn-stop-motion { transition: 0.5s cubic-bezier(0.35, 1.75, 0.6, 1); transform: scale(1) rotate(0.001deg); } .btn-stop-motion:hover { transform: scale(1.05) rotate(-1deg); } /*===============================================================*/ /*CUSTOM CURSOR TEXT*/ /*===============================================================*/ body:has([data-cursor]:hover) .cursor { opacity: 1; } .button:hover .button-bg { transform: scale(0.95); }