.start-btn-container {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: startBtnEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.start-btn-container:hover {
    transform: scale(1.08);
}

.start-btn-container:active {
    transform: scale(0.95);
}

.start-btn-img {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

.title-container {
    animation: titleEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1), titleFloat 6s ease-in-out infinite 1.2s;
}

.scroll-container {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.socket::before {
    transition: all 0.3s ease;
}

.socket.active {
    animation: socketPulseGlow 2s ease-in-out infinite;
}

.socket.active::before {
    border-color: var(--color-gold-bright);
    box-shadow: 0 0 1.5cqw var(--color-gold), inset 0 0 1cqw var(--color-gold);
    background: rgba(212, 175, 55, 0.1);
}

.socket.highlighted::before {
    border-color: var(--color-gold-bright);
    box-shadow: 0 0 1.5cqw var(--color-gold), inset 0 0 1cqw var(--color-gold);
    transform: scale(1.1);
}

.placed-item {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
}

.placed-item.placed {
    transform: scale(1);
}

.placed-item.fading {
    opacity: 0;
    transform: scale(1.1);
}

.action-btn {
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-btn:hover {
    transform: translateY(-0.8cqh);
}

.action-btn:active {
    transform: translateY(-0.2cqh);
}

.action-btn .btn-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.6cqh 1.2cqh rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.action-btn:not(.disabled):not(.greyed-out) .btn-icon {
    animation: btnIconPulse 2.5s ease-in-out infinite;
}

.action-btn:hover .btn-icon {
    animation-play-state: paused;
    transform: scale(1.08);
    filter: drop-shadow(0 0.8cqh 1.5cqh rgba(212, 175, 55, 0.7));
}

@keyframes btnIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0.6cqh 1.2cqh rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0.9cqh 1.8cqh rgba(0, 0, 0, 0.65)) drop-shadow(0 0 1.2cqh rgba(212, 175, 55, 0.6));
    }
}

.gem-selection-overlay {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.selection-gem-item:hover {
    transform: scale(1.08);
}

.selection-gem-item:active {
    transform: scale(0.95);
}

.brooch-selection-overlay {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.selection-brooch-item:hover {
    transform: scale(1.08);
}

.selection-brooch-item:active {
    transform: scale(0.95);
}

.celebration-character-container.active {
    animation: characterPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, characterFloat 5s ease-in-out infinite 0.8s;
}

.result-text-container.active {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.result-text-container.active .result-text-img {
    animation: resultTextDance 5s ease-in-out infinite 0.8s;
}


@keyframes titleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-1.5cqh) rotate(1deg); }
}

@keyframes characterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1cqh); }
}

@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0.8cqh 1.5cqh rgba(0, 0, 0, 0.6)) brightness(1); }
    50% { filter: drop-shadow(0 1.2cqh 2.5cqh rgba(212, 175, 55, 0.7)) brightness(1.15); }
}

@keyframes characterPop {
    0% { transform: scale(0) rotate(-10deg); }
    70% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes fadeInUp {
    0% { transform: translateY(4cqh); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes startBtnEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.speech-bubble-container.active .bubble-body {
    animation: bubbleSoftFloat 4s ease-in-out infinite 1.2s;
}

@keyframes bubbleSoftFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.8cqh); }
}

@keyframes socketPulseGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 0.8cqh rgba(212, 175, 55, 0.45));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        filter: drop-shadow(0 0 2cqh rgba(212, 175, 55, 0.85));
    }
}

@keyframes resultTextDance {
    0%, 100% {
        transform: scale(1) rotate(0deg) translateY(0);
        filter: drop-shadow(0 1cqh 2cqh rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1.5cqh rgba(212, 175, 55, 0.4));
    }
    25% {
        transform: scale(1.04) rotate(1.5deg) translateY(-0.5cqh);
        filter: drop-shadow(0 1.5cqh 3cqh rgba(0, 0, 0, 0.8)) drop-shadow(0 0 2.5cqh rgba(212, 175, 55, 0.75));
    }
    50% {
        transform: scale(1) rotate(-1deg) translateY(0.2cqh);
        filter: drop-shadow(0 1cqh 2cqh rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1.5cqh rgba(212, 175, 55, 0.4));
    }
    75% {
        transform: scale(1.03) rotate(-1.5deg) translateY(-0.3cqh);
        filter: drop-shadow(0 1.3cqh 2.5cqh rgba(0, 0, 0, 0.75)) drop-shadow(0 0 2cqh rgba(212, 175, 55, 0.6));
    }
}