/* --- BASE STYLES --- */
body {
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', sans-serif;
}

/* --- LOADER ANIMATION --- */
.loader {
    border-top-color: #4f46e5;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.s linear infinite;
}
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- SUCCESS/FAIL ANIMATIONS (for modals and dialogs) --- */
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }

/* Success Checkmark */
.checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; margin: 10% auto; box-shadow: inset 0px 0px 0px #4f46e5; animation: fill_success .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke: #4f46e5; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes fill_success { 100% { box-shadow: inset 0px 0px 0px 30px #4f46e5; } }

/* Failure 'X' Mark */
.failmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; margin: auto; box-shadow: inset 0px 0px 0px #ef4444; animation: fill_fail .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.failmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke: #ef4444; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.failmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: #fff; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes fill_fail { 100% { box-shadow: inset 0px 0px 0px 30px #ef4444; } }

/* --- PROFILE DIALOG ANIMATION --- */
#profile-dialog {
    transition: transform 0.3s ease-in-out;
}

/* --- GIFT BOX (sppinj.php) ANIMATIONS --- */
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4)); } 50% { filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8)); } }

.box-unopened { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; animation: bounce 2.5s infinite ease-in-out, glow 3s infinite alternate; }
.box-unopened:hover { transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.box-unopened.shaking { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }
.box-opened { filter: grayscale(50%); opacity: 0.7; }