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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #080808;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.75;
    color: #E8E8E8;
    position: relative;
}

/* ── Smoke animation ── */
body::before {
    content: '';
    position: fixed;
    inset: -20%;
    width: 140%;
    height: 140%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 75% 40%, rgba(255,255,255,0.05) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 50% 80%, rgba(255,255,255,0.04) 0%, transparent 60%);
    animation: smokeShift 18s ease-in-out infinite alternate;
    filter: blur(40px);
}

body::after {
    content: '';
    position: fixed;
    inset: -20%;
    width: 140%;
    height: 140%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image:
        radial-gradient(ellipse 55% 45% at 60% 30%, rgba(255,255,255,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 30% 70%, rgba(255,255,255,0.05) 0%, transparent 60%);
    animation: smokeShift2 24s ease-in-out infinite alternate;
    filter: blur(55px);
}

@keyframes smokeShift {
    0%   { transform: translate(0%, 0%) scale(1); }
    33%  { transform: translate(3%, -4%) scale(1.04); }
    66%  { transform: translate(-4%, 3%) scale(0.97); }
    100% { transform: translate(2%, -2%) scale(1.03); }
}

@keyframes smokeShift2 {
    0%   { transform: translate(0%, 0%) scale(1.02); }
    33%  { transform: translate(-3%, 5%) scale(0.98); }
    66%  { transform: translate(4%, -3%) scale(1.05); }
    100% { transform: translate(-2%, 2%) scale(0.99); }
}

/* Ensure all content sits above the smoke */
header, main, footer {
    position: relative;
    z-index: 1;
}