html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* FuyuPreset Modern Minimalist Purple-Blue-White Theme & Animations */
:root {
    --fuyu-purple: #7c3aed;
    --fuyu-blue: #2563eb;
}

.aspect-9-16 {
    aspect-ratio: 9 / 16;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Tactile Interactive Button Animations */
.btn-fx {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms ease,
                background-color 180ms ease,
                border-color 180ms ease,
                opacity 180ms ease;
}
.btn-fx:hover:not(:disabled) {
    transform: translateY(-1px);
}
.btn-fx:active:not(:disabled) {
    transform: scale(0.96);
}

/* Card Hover Animation */
.card-fx {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 240ms ease,
                border-color 240ms ease;
}
.card-fx:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(79, 70, 229, 0.18);
}

/* Modal & Dropdown Entrance */
@keyframes modalPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-anim {
    animation: modalPop 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tab-anim {
    animation: fadeSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-anim {
    animation: toastSlide 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Bottom Footer Pill Transition */
.nav-pill-active {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px -4px rgba(79, 70, 229, 0.45);
}