/*
 * Copyright (c) 2026 Ethorbit
 * All rights reserved.
*/

html:not(.page-ready) body {
    opacity: 0;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100dvh;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-in-out;
    overflow-y: auto;   /* was overflow: hidden — allow scroll as a safety net */
    overflow-x: hidden; /* still prevent horizontal scroll/glitch bleed */
}

p {
    font-family: 'CustomChalk', serif;
    color: grey;
}

@font-face {
    font-family: 'CustomChalk';
    src: url('/nzombies-experimental/include/assets/fonts/kg-broken-vessels-sketch.regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@-webkit-keyframes glitch {
    0%   { -webkit-transform: translate(0, 0);   opacity: 1; }
    4%   { -webkit-transform: translate(-2px, 1px); opacity: 0.9; }
    8%   { -webkit-transform: translate(2px, -1px); opacity: 1; }
    10%  { -webkit-transform: translate(0, 0);   opacity: 1; }
    42%  { -webkit-transform: translate(0, 0);   opacity: 1; }
    44%  { -webkit-transform: translate(1px, 1px); opacity: 0.7; }
    46%  { -webkit-transform: translate(-2px, -1px); opacity: 1; }
    48%  { -webkit-transform: translate(0, 0);   opacity: 1; }
    70%  { -webkit-transform: translate(0, 0);   opacity: 1; }
    72%  { -webkit-transform: translate(-3px, 0); opacity: 0.85; }
    74%  { -webkit-transform: translate(3px, 0); opacity: 1; }
    76%  { -webkit-transform: translate(0, 0);   opacity: 1; }
    100% { -webkit-transform: translate(0, 0);   opacity: 1; }
}

@keyframes glitch {
    0%   { transform: translate(0, 0);   opacity: 1; }
    4%   { transform: translate(-2px, 1px); opacity: 0.9; }
    8%   { transform: translate(2px, -1px); opacity: 1; }
    10%  { transform: translate(0, 0);   opacity: 1; }
    42%  { transform: translate(0, 0);   opacity: 1; }
    44%  { transform: translate(1px, 1px); opacity: 0.7; }
    46%  { transform: translate(-1px, -1px); opacity: 1; }
    48%  { transform: translate(0, 0);   opacity: 1; }
    70%  { transform: translate(0, 0);   opacity: 1; }
    72%  { transform: translate(-3px, 0); opacity: 0.85; }
    74%  { transform: translate(3px, 0); opacity: 1; }
    76%  { transform: translate(0, 0);   opacity: 1; }
    100% { transform: translate(0, 0);   opacity: 1; }
}