/* ─── Kings Meadow Design System ─── */

:root {
    --nattskog:   #1E160D;
    --lader:      #3D2B1A;
    --kastanje:   #6B4C30;
    --sadel:      #8C6030;
    --massing:    #B8864A;
    --guldbrons:  #C9A87A;
    --kanvas:     #E8D5B0;
    --linne:      #F5EFE6;
    --mossa:      #4A7A5C;
    --djupvatten: #2C5A6E;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%       { opacity: 0.8; transform: scaleY(0.6); }
}

.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.9s ease forwards;
}

.animate-fade-up-delay-1 { animation-delay: 0.3s; }
.animate-fade-up-delay-2 { animation-delay: 0.5s; }
.animate-fade-up-delay-3 { animation-delay: 0.7s; }
.animate-fade-up-delay-4 { animation-delay: 0.9s; }

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease 1.4s forwards;
}

.animate-scroll-pulse {
    animation: scrollPulse 2s ease infinite;
}

/* ─── Blazor error UI ─── */
#blazor-error-ui {
    background: var(--kastanje);
    color: var(--linne);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}