미디어위키:Theme.css

/* =========================================
   COASTLINE: BLACK ICE - Theme
   Dense breathing halftone background v37
   ========================================= */

html {
    min-height: 100%;
    background-color: #000 !important;
}

body {
    min-height: 100%;
    margin: 0 !important;
    background: transparent !important;
    position: relative;
}

/* legacy JS background off */
.WW-bg {
    display: none !important;
}

/* fixed dense halftone plate */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background-color: #000;
    background-image:
        radial-gradient(circle at 0.95px 0.95px, rgba(226,226,226,0.94) 0.85px, transparent 1.15px);
    background-size: 8px 8px;
    background-position: 0 0;
    opacity: 1;
}

/* main dark breathing mask over the fixed halftone */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(ellipse 22% 16% at 16% 12%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 66%, transparent 84%),
        radial-gradient(ellipse 19% 15% at 41% 10%, rgba(0,0,0,0.88) 0 48%, rgba(0,0,0,0.56) 64%, transparent 82%),
        radial-gradient(ellipse 23% 17% at 72% 15%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.74) 67%, transparent 84%),
        radial-gradient(ellipse 17% 14% at 88% 26%, rgba(0,0,0,0.82) 0 46%, rgba(0,0,0,0.50) 63%, transparent 80%),
        radial-gradient(ellipse 24% 18% at 24% 36%, rgba(0,0,0,0.94) 0 50%, rgba(0,0,0,0.70) 66%, transparent 84%),
        radial-gradient(ellipse 18% 14% at 51% 34%, rgba(0,0,0,0.84) 0 46%, rgba(0,0,0,0.50) 62%, transparent 80%),
        radial-gradient(ellipse 24% 18% at 79% 39%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 67%, transparent 84%),
        radial-gradient(ellipse 21% 16% at 12% 63%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.72) 66%, transparent 84%),
        radial-gradient(ellipse 18% 14% at 38% 60%, rgba(0,0,0,0.84) 0 46%, rgba(0,0,0,0.50) 62%, transparent 80%),
        radial-gradient(ellipse 22% 17% at 64% 70%, rgba(0,0,0,0.94) 0 49%, rgba(0,0,0,0.68) 65%, transparent 83%),
        radial-gradient(ellipse 20% 16% at 86% 82%, rgba(0,0,0,0.96) 0 50%, rgba(0,0,0,0.74) 67%, transparent 84%),
        radial-gradient(ellipse 14% 12% at 8% 88%, rgba(0,0,0,0.82) 0 46%, rgba(0,0,0,0.48) 62%, transparent 80%),
        radial-gradient(ellipse 18% 14% at 46% 87%, rgba(0,0,0,0.86) 0 47%, rgba(0,0,0,0.52) 63%, transparent 81%),
        radial-gradient(ellipse 14% 12% at 72% 92%, rgba(0,0,0,0.78) 0 45%, rgba(0,0,0,0.42) 60%, transparent 78%);
    animation: halftoneDenseBreathA 13.5s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0.84;
}

/* secondary irregular breathing mask to break the clean ellipses */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(ellipse 12% 10% at 10% 10%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
        radial-gradient(ellipse 15% 11% at 23% 18%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
        radial-gradient(ellipse 12% 10% at 35% 9%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
        radial-gradient(ellipse 14% 11% at 55% 14%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
        radial-gradient(ellipse 11% 9% at 70% 10%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
        radial-gradient(ellipse 13% 10% at 86% 18%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
        radial-gradient(ellipse 14% 11% at 18% 34%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
        radial-gradient(ellipse 12% 10% at 43% 31%, rgba(0,0,0,0.28) 0 38%, transparent 70%),
        radial-gradient(ellipse 15% 11% at 66% 36%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
        radial-gradient(ellipse 13% 10% at 84% 46%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
        radial-gradient(ellipse 15% 11% at 13% 58%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
        radial-gradient(ellipse 12% 10% at 30% 56%, rgba(0,0,0,0.28) 0 38%, transparent 70%),
        radial-gradient(ellipse 13% 10% at 49% 62%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
        radial-gradient(ellipse 15% 11% at 72% 68%, rgba(0,0,0,0.34) 0 40%, transparent 72%),
        radial-gradient(ellipse 13% 10% at 90% 74%, rgba(0,0,0,0.36) 0 42%, transparent 74%),
        radial-gradient(ellipse 12% 10% at 20% 82%, rgba(0,0,0,0.30) 0 38%, transparent 70%),
        radial-gradient(ellipse 14% 11% at 41% 83%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
        radial-gradient(ellipse 13% 10% at 60% 88%, rgba(0,0,0,0.32) 0 40%, transparent 72%),
        radial-gradient(ellipse 11% 9% at 82% 88%, rgba(0,0,0,0.34) 0 40%, transparent 72%);
    animation: halftoneDenseBreathB 18s ease-in-out infinite;
    filter: blur(14px);
    opacity: 0.72;
}

@keyframes halftoneDenseBreathA {
    0% {
        opacity: 0.84;
        filter: blur(8px) saturate(1);
    }
    12% {
        opacity: 0.94;
        filter: blur(9px) saturate(1.02);
    }
    25% {
        opacity: 0.80;
        filter: blur(7px) saturate(0.98);
    }
    38% {
        opacity: 0.98;
        filter: blur(10px) saturate(1.04);
    }
    52% {
        opacity: 0.82;
        filter: blur(7px) saturate(0.98);
    }
    67% {
        opacity: 0.96;
        filter: blur(10px) saturate(1.03);
    }
    82% {
        opacity: 0.78;
        filter: blur(7px) saturate(0.98);
    }
    100% {
        opacity: 0.84;
        filter: blur(8px) saturate(1);
    }
}

@keyframes halftoneDenseBreathB {
    0% {
        opacity: 0.70;
        filter: blur(14px);
    }
    18% {
        opacity: 0.82;
        filter: blur(16px);
    }
    35% {
        opacity: 0.60;
        filter: blur(12px);
    }
    54% {
        opacity: 0.86;
        filter: blur(17px);
    }
    72% {
        opacity: 0.64;
        filter: blur(13px);
    }
    88% {
        opacity: 0.80;
        filter: blur(16px);
    }
    100% {
        opacity: 0.70;
        filter: blur(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    body::after {
        animation: none !important;
    }
}