/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    /* Prevents rubber-banding */
}

body {
    background-color: #F8F5F2;
    /* Very soft off-white/blush base */
    font-family: 'Hachi Maru Pop', cursive;
    position: fixed;
    /* Nuclear option to stop scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    /* Use dynamic viewport height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2D2D2D;
    /* Soft black/dark gray for text */
    touch-action: none;
    overscroll-behavior: none;
}

/* Typography */
.content {
    position: relative;
    z-index: 10;
}

h1 {
    font-family: 'Palette Mosaic', system-ui;
    font-weight: 200;
    font-size: clamp(2.5rem, 4vw, 3rem);
    letter-spacing: 0em;
    text-align: center;
    color: #fff;
    /* White text creates good contrast against the center circle if it's dark enough, or we can use dark text if the center is light. Request said "Innermost circle slightly darker". Let's try white text for elegance, or a dark charcoal.  Let's stick to white for now as it usually looks premium on colors. Or actually, looking at the prompt "Innermost circle slightly darker; outer circles progressively lighter". If innermost is dark-ish pastel, white might pop. If it's just "slightly darker", maybe dark text is better. Let's go with white for the "New Yorker" editorial feel on top of a color, or standard dark if it's too pale. Let's try white with a subtle shadow or just pure white if contrast allows. Actually, "high-contrast serif" implies the font shape, but color-wise, let's use white for a dreamy feel. */
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.slow-text {
    font-family: 'Hachi Maru Pop', cursive;
    letter-spacing: 0.2em;
    font-size: clamp(2.5rem, 6vw, 5rem);
    /* Increase spacing significantly */
    margin-right: -0.5em;
    /* Compensate for the extra space on the last letter to keep it centered */
    display: inline-block;
    /* Ensure transform/layout works nicely */
}

/* Circles Container */
.circles-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150vmax;
    height: 150vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.circle {
    position: absolute;
    border-radius: 50%;
    transform-origin: center;
    will-change: transform, opacity;
}

/* 
   Colors: Lavender, blush pink, pale blue, peach. 
   Gradient from darker center to lighter edge.
   10 circles, ~10% increment.
*/

.circle-1 {
    width: 20%;
    height: 20%;
    background-color: hsla(280, 55%, 72%, 0.8);
    /* Lavender-ish */
    z-index: 9;
    animation: pulse 1s ease-in-out infinite alternate-reverse;
}

.circle-2 {
    width: 20%;
    height: 20%;
    background-color: hsla(280, 55%, 72%, 0.8);
    /* Lavender-ish */
    z-index: 9;
    animation: pulse 2s ease-in-out infinite alternate-reverse;
}

.circle-3 {
    width: 30%;
    height: 30%;
    background-color: hsla(300, 50%, 75%, 0.75);
    /* transition to pink */
    z-index: 8;
    animation: pulse 3s ease-in-out infinite alternate;
}

.circle-4 {
    width: 40%;
    height: 40%;
    background-color: hsla(330, 60%, 80%, 0.7);
    /* Blush Pink */
    z-index: 7;
    animation: pulse 4s ease-in-out infinite alternate-reverse;
}

.circle-5 {
    width: 50%;
    height: 50%;
    background-color: hsla(350, 65%, 82%, 0.65);
    /* Light Pink/Peach */
    z-index: 6;
    animation: pulse 5s ease-in-out infinite alternate;
}

.circle-6 {
    width: 60%;
    height: 60%;
    background-color: hsla(15, 70%, 85%, 0.6);
    /* Peach */
    z-index: 5;
    animation: pulse 6s ease-in-out infinite alternate-reverse;
}

.circle-7 {
    width: 70%;
    height: 70%;
    background-color: hsla(40, 60%, 87%, 0.55);
    /* Peach/Yellow-ish hint */
    z-index: 4;
    animation: pulse 7s ease-in-out infinite alternate;
}

.circle-8 {
    width: 80%;
    height: 80%;
    background-color: hsla(180, 40%, 88%, 0.5);
    /* Pale Blue/Green hint */
    z-index: 3;
    animation: pulse 8s ease-in-out infinite alternate-reverse;
}

.circle-9 {
    width: 90%;
    height: 90%;
    background-color: hsla(190, 50%, 90%, 0.45);
    /* Pale Blue */
    z-index: 2;
    animation: pulse 9s ease-in-out infinite alternate;
}

.circle-10 {
    width: 100%;
    height: 100%;
    background-color: hsla(210, 40%, 94%, 0.4);
    /* Very light blue/white */
    z-index: 1;
    animation: pulse 10s ease-in-out infinite alternate-reverse;
}

/* Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.96;
    }

    100% {
        transform: scale(1.03);
        opacity: 1;
        /* Change opacity range for more/less fade */
    }
}

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    opacity: 0.1;
    background-image: url('noise.svg');
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .circle {
        animation: none;
    }
}