:root {
    --bg: rgb(255, 180, 200);
    --deep-red: #5f0f18;
    --accent-red: #8b1725;
    --soft-pink: #f2c9d2;
    --text: #000000;
}

body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ==========================================================================
   SHARED NOISE CONTAINER
   ========================================================================== */
.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   HARMONIC DOT GRID LAYERS
   BASE GRID UNIT: 10px (All dot centers sit at coordinates aligned to 10px multiples)
   ========================================================================== */

/* Layer 1: Dense Base Grid (10px x 10px) - Gentle base breath */
.noise.noise1 {
    background: radial-gradient(
        circle,
        rgba(30, 30, 30, 0.35) 0px,
        rgba(30, 30, 30, 0.35) 1.5px,
        transparent 1.5px
    ) center / 10px 10px;
    animation: pulseBase 18s ease-in-out infinite;
}

/* Layer 2: Every 2nd Dot Grid (20px x 20px) */
.noise.noise2 {
    background: radial-gradient(
        circle,
        rgba(30, 30, 30, 0.4) 0px,
        rgba(30, 30, 30, 0.4) 1.5px,
        transparent 1.5px
    ) center / 20px 20px;
    animation: pulseSlow 11s ease-in-out infinite;
}

/* Layer 3: Every 3rd Dot Grid (30px x 30px) */
.noise.noise3 {
    background: radial-gradient(
        circle,
        rgba(30, 30, 30, 0.45) 0px,
        rgba(30, 30, 30, 0.45) 1.5px,
        transparent 1.5px
    ) center / 30px 30px;
    animation: pulseMid 7s ease-in-out infinite;
}

/* Layer 4: Every 4th Dot Grid (40px x 40px) */
.noise.noise4 {
    background: radial-gradient(
        circle,
        rgba(30, 30, 30, 0.5) 0px,
        rgba(30, 30, 30, 0.5) 1.5px,
        transparent 1.5px
    ) center / 40px 40px;
    animation: pulseFast 5s ease-in-out infinite;
}

/* Layer 5: Accent Shimmer Grid (200px x 200px) */
.noise.noise5 {
    background: radial-gradient(
        circle,
        rgba(30, 30, 30, 0.6) 0px,
        rgba(30, 30, 30, 0.6) 1.5px,
        transparent 2px
    ) center / 200px 200px;
    animation: pulseAccent 13s ease-in-out infinite;
}

/* Layer 6: Center Focal Bloom (Preserved from original) */
.noise.noise6 {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(242, 201, 210, 0.35) 0%,
        rgba(139, 23, 37, 0.1) 34%,
        transparent 70%
    );
    mix-blend-mode: soft-light;
    animation: corePulse 34s ease-in-out infinite alternate;
}

/* Layer 10: Outer Frame Vignette & Sub-Ambient Pulse (Preserved from original) */
.noise.noise10 {
    background: radial-gradient(
        circle at 50% 50%,
        transparent 40%,
        rgba(95, 15, 24, 0.12) 100%
    );
    mix-blend-mode: multiply;
    animation: pulseL10 89s ease-in-out infinite alternate;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* Dot Grid Pulse Keyframes */
@keyframes pulseBase {
    0%, 100% { opacity: 0.02; }
    50%      { opacity: 0.07; }
}

@keyframes pulseSlow {
    0%, 100% { opacity: 0.01; }
    40%      { opacity: 0.08; }
    70%      { opacity: 0.03; }
}

@keyframes pulseMid {
    0%, 100% { opacity: 0.03; }
    30%      { opacity: 0.12; }
    80%      { opacity: 0.02; }
}

@keyframes pulseFast {
    0%, 100% { opacity: 0.02; }
    60%      { opacity: 0.15; }
}

@keyframes pulseAccent {
    0%, 100% { opacity: 0.00; }
    25%      { opacity: 0.09; }
    50%      { opacity: 0.01; }
    75%      { opacity: 0.14; }
}

/* Vignette & Bloom Keyframes */
@keyframes corePulse {
    0%   { transform: scale(0.9); opacity: 0.3; }
    100% { transform: scale(1.15); opacity: 0.7; }
}

@keyframes pulseL10 {
    0%   { opacity: 0.4; }
    100% { opacity: 0.8; }
}

/* ==========================================================================
   HERO / CONTENT STYLING
   ========================================================================== */
.hero {
    text-align: center;
    position: relative;
    z-index: 100;
}

h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 10rem;
    line-height: 0.9;
    margin: 0;
    color: var(--deep-red);
    text-shadow: 0 0 40px rgba(242, 201, 210, 0.7);
}

p {
    font-size: 1rem;
    letter-spacing: 0.3em;
    margin-top: 0.5rem;
    color: var(--text);
}