/* MoonWhale PWA Styles */

/* Nasalization Font */
@font-face {
    font-family: 'Nasalization';
    src: url('/static/fonts/nasalization/Nasalization Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-brand {
    font-family: 'Nasalization', sans-serif;
}

/* Sticky header - ensure content doesn't overlap */
header.sticky {
    z-index: 40 !important;
}

/* Active scale animation for buttons */
.active\:scale-98:active {
    transform: scale(0.98);
}

/* Smooth transitions */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Safe area insets for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
    }
}

/* PWA Standalone mode adjustments */
@media all and (display-mode: standalone) {
    .standalone-pt {
        padding-top: env(safe-area-inset-top);
    }
}

/* Disable text selection on interactive elements */
button, a, nav {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Form input improvements */
input[type="text"],
input[type="email"],
input[type="tel"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Bottom nav safe area */
nav.fixed {
    padding-bottom: env(safe-area-inset-bottom, 0);
}