* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

#app {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.sky {
    position: absolute;
    inset: 0;
    transition: background 0.8s ease-in-out;
}

.paper-texture {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}

.stars-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: var(--star-opacity);
        box-shadow: 0 0 calc(var(--star-size) * 2) rgba(255, 255, 255, var(--star-opacity));
    }
    50% {
        opacity: calc(var(--star-opacity) * 0.3);
        box-shadow: 0 0 calc(var(--star-size) * 4) rgba(255, 255, 255, calc(var(--star-opacity) * 0.5));
    }
}

.branding {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 30;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    opacity: 0;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: fadeIn 2s ease 1s forwards;
}

.time-display {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 30;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: color 2s ease;
    animation: fadeIn 2s ease 1s forwards;
}

.time-display.day {
    color: #333;
    text-shadow: none;
}

.time-display.night {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes fadeIn {
    to {
        opacity: 0.5;
    }
}