/* Custom Fonts */
@font-face {
    font-family: 'Noot';
    src: url('/static/fonts/noot.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bryndan';
    src: url('/static/fonts/BryndanWriteBook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global Layout & Overflow Protection */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Playful flyer styling matching Enka branding */
.playful-border {
    border: 3px solid #504742;
    border-radius: 18px;
    box-shadow: 4px 4px 0px #504742;
}

@media (min-width: 768px) {
    .playful-border {
        border-width: 4px;
        border-radius: 24px;
        box-shadow: 6px 6px 0px #504742;
    }
}

.playful-border-sm {
    border: 2px solid #504742;
    border-radius: 14px;
    box-shadow: 3px 3px 0px #504742;
}

@media (min-width: 768px) {
    .playful-border-sm {
        border-width: 3px;
        border-radius: 16px;
        box-shadow: 4px 4px 0px #504742;
    }
}

.playful-button {
    border: 3px solid #504742;
    box-shadow: 4px 4px 0px #504742;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.playful-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #504742;
}

.playful-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #504742;
}

/* Floating animation for music notes */
@keyframes float {
    0% { transform: translateY(0px) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(-5deg); }
    100% { transform: translateY(0px) rotate(5deg); }
}

.floating-graphic {
    animation: float 5s ease-in-out infinite;
}

.floating-graphic-delayed {
    animation: float 6s ease-in-out infinite 2s;
}

/* Pulse animation */
@keyframes gentle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.pulse-hover:hover {
    animation: gentle-pulse 1.5s infinite;
}

/* HTMX transition and loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: flex;
}
.htmx-request.htmx-indicator {
    display: flex;
}

/* Smooth fade in for swapped content */
.htmx-settling {
    opacity: 0;
}
.fade-in {
    animation: fadeIn 0.35s ease-in-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}