/* _content/Annopei/Shared/Components/ErrorPage/GlitchError.razor.rz.scp.css */
/* ============================================================
   GlitchErrorPage.razor.css — Scoped styles for GlitchErrorPage
   ============================================================ */

.glitch-wrapper[b-sor1s6qvdy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #18121A;
    font-family: 'Varela', sans-serif;
    overflow: hidden;
}

/* --- Base glitch element --- */

.glitch[b-sor1s6qvdy] {
    color: #fff;
    position: relative;
    width: 640px;
    margin: 0 auto;
}

.glitch-code[b-sor1s6qvdy] {
    font-size: 168px;
}

.glitch-title[b-sor1s6qvdy] {
    font-size: 100px;
}

.glitch[b-sor1s6qvdy]::before,
.glitch[b-sor1s6qvdy]::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    background: #18121A;
    overflow: hidden;
}

.glitch[b-sor1s6qvdy]::before {
    left: -5px;
    text-shadow: 2px 0 #00f;
    clip: rect(0, 900px, 0, 0);
}

.glitch[b-sor1s6qvdy]::after {
    left: 2px;
    text-shadow: -2px 0 red;
    clip: rect(0, 900px, 0, 0);
}

/* ============================================================
   Animation Set A — chaotic, full-range sweeps (503, 408, etc.)
   ============================================================ */

.anim-a[b-sor1s6qvdy]::before {
    animation: noise-a1-b-sor1s6qvdy 3s infinite linear alternate-reverse;
}
.anim-a[b-sor1s6qvdy]::after {
    animation: noise-a2-b-sor1s6qvdy 2s infinite linear alternate-reverse;
}

@keyframes noise-a1-b-sor1s6qvdy {
    0%   { clip: rect(2px, 9999px, 48px, 0); }
    3%   { clip: rect(88px, 9999px, 94px, 0); }
    7%   { clip: rect(14px, 9999px, 72px, 0); }
    12%  { clip: rect(96px, 9999px, 108px, 0); }
    13%  { clip: rect(32px, 9999px, 38px, 0); }
    22%  { clip: rect(4px, 9999px, 86px, 0); }
    23%  { clip: rect(78px, 9999px, 90px, 0); }
    35%  { clip: rect(18px, 9999px, 54px, 0); }
    41%  { clip: rect(66px, 9999px, 79px, 0); }
    42%  { clip: rect(8px, 9999px, 42px, 0); }
    58%  { clip: rect(100px, 9999px, 106px, 0); }
    63%  { clip: rect(22px, 9999px, 68px, 0); }
    64%  { clip: rect(84px, 9999px, 88px, 0); }
    78%  { clip: rect(6px, 9999px, 56px, 0); }
    83%  { clip: rect(92px, 9999px, 114px, 0); }
    84%  { clip: rect(28px, 9999px, 34px, 0); }
    93%  { clip: rect(10px, 9999px, 80px, 0); }
    100% { clip: rect(76px, 9999px, 84px, 0); }
}

@keyframes noise-a2-b-sor1s6qvdy {
    0%   { clip: rect(24px, 9999px, 62px, 0); }
    5%   { clip: rect(90px, 9999px, 96px, 0); }
    6%   { clip: rect(6px, 9999px, 78px, 0); }
    18%  { clip: rect(80px, 9999px, 92px, 0); }
    27%  { clip: rect(12px, 9999px, 44px, 0); }
    28%  { clip: rect(100px, 9999px, 112px, 0); }
    44%  { clip: rect(2px, 9999px, 58px, 0); }
    45%  { clip: rect(86px, 9999px, 90px, 0); }
    56%  { clip: rect(16px, 9999px, 74px, 0); }
    71%  { clip: rect(94px, 9999px, 104px, 0); }
    72%  { clip: rect(8px, 9999px, 36px, 0); }
    86%  { clip: rect(68px, 9999px, 82px, 0); }
    87%  { clip: rect(20px, 9999px, 26px, 0); }
    95%  { clip: rect(4px, 9999px, 66px, 0); }
    100% { clip: rect(82px, 9999px, 100px, 0); }
}

/* ============================================================
   Animation Set B — twitchy, rapid small bursts (404, 401, etc.)
   ============================================================ */

.anim-b[b-sor1s6qvdy]::before {
    animation: noise-b1-b-sor1s6qvdy 2.5s infinite linear alternate-reverse;
}
.anim-b[b-sor1s6qvdy]::after {
    animation: noise-b2-b-sor1s6qvdy 1.8s infinite linear alternate-reverse;
}

@keyframes noise-b1-b-sor1s6qvdy {
    0%   { clip: rect(44px, 9999px, 50px, 0); }
    2%   { clip: rect(16px, 9999px, 68px, 0); }
    3%   { clip: rect(90px, 9999px, 96px, 0); }
    11%  { clip: rect(54px, 9999px, 58px, 0); }
    15%  { clip: rect(8px, 9999px, 46px, 0); }
    16%  { clip: rect(102px, 9999px, 110px, 0); }
    28%  { clip: rect(36px, 9999px, 40px, 0); }
    33%  { clip: rect(72px, 9999px, 78px, 0); }
    34%  { clip: rect(4px, 9999px, 52px, 0); }
    48%  { clip: rect(82px, 9999px, 86px, 0); }
    55%  { clip: rect(20px, 9999px, 64px, 0); }
    56%  { clip: rect(96px, 9999px, 102px, 0); }
    67%  { clip: rect(30px, 9999px, 34px, 0); }
    74%  { clip: rect(60px, 9999px, 66px, 0); }
    75%  { clip: rect(10px, 9999px, 56px, 0); }
    88%  { clip: rect(84px, 9999px, 92px, 0); }
    94%  { clip: rect(42px, 9999px, 48px, 0); }
    100% { clip: rect(6px, 9999px, 38px, 0); }
}

@keyframes noise-b2-b-sor1s6qvdy {
    0%   { clip: rect(62px, 9999px, 68px, 0); }
    4%   { clip: rect(10px, 9999px, 54px, 0); }
    5%   { clip: rect(98px, 9999px, 106px, 0); }
    17%  { clip: rect(26px, 9999px, 32px, 0); }
    24%  { clip: rect(74px, 9999px, 80px, 0); }
    25%  { clip: rect(2px, 9999px, 44px, 0); }
    39%  { clip: rect(86px, 9999px, 94px, 0); }
    46%  { clip: rect(40px, 9999px, 46px, 0); }
    47%  { clip: rect(14px, 9999px, 62px, 0); }
    61%  { clip: rect(104px, 9999px, 112px, 0); }
    68%  { clip: rect(50px, 9999px, 56px, 0); }
    69%  { clip: rect(6px, 9999px, 36px, 0); }
    82%  { clip: rect(78px, 9999px, 88px, 0); }
    91%  { clip: rect(18px, 9999px, 24px, 0); }
    100% { clip: rect(66px, 9999px, 76px, 0); }
}

/* ============================================================
   Animation Set C — slow, heavy glitch (500, 502, etc.)
   ============================================================ */

.anim-c[b-sor1s6qvdy]::before {
    animation: noise-c1-b-sor1s6qvdy 4s infinite linear alternate-reverse;
}
.anim-c[b-sor1s6qvdy]::after {
    animation: noise-c2-b-sor1s6qvdy 3.2s infinite linear alternate-reverse;
}

@keyframes noise-c1-b-sor1s6qvdy {
    0%   { clip: rect(6px, 9999px, 82px, 0); }
    8%   { clip: rect(48px, 9999px, 54px, 0); }
    20%  { clip: rect(2px, 9999px, 96px, 0); }
    21%  { clip: rect(70px, 9999px, 76px, 0); }
    40%  { clip: rect(12px, 9999px, 88px, 0); }
    52%  { clip: rect(92px, 9999px, 98px, 0); }
    60%  { clip: rect(4px, 9999px, 72px, 0); }
    61%  { clip: rect(58px, 9999px, 64px, 0); }
    78%  { clip: rect(8px, 9999px, 104px, 0); }
    90%  { clip: rect(34px, 9999px, 40px, 0); }
    100% { clip: rect(14px, 9999px, 68px, 0); }
}

@keyframes noise-c2-b-sor1s6qvdy {
    0%   { clip: rect(18px, 9999px, 74px, 0); }
    10%  { clip: rect(86px, 9999px, 92px, 0); }
    25%  { clip: rect(4px, 9999px, 90px, 0); }
    26%  { clip: rect(62px, 9999px, 68px, 0); }
    45%  { clip: rect(10px, 9999px, 80px, 0); }
    55%  { clip: rect(98px, 9999px, 106px, 0); }
    65%  { clip: rect(22px, 9999px, 58px, 0); }
    66%  { clip: rect(42px, 9999px, 48px, 0); }
    82%  { clip: rect(6px, 9999px, 100px, 0); }
    95%  { clip: rect(76px, 9999px, 84px, 0); }
    100% { clip: rect(30px, 9999px, 66px, 0); }
}

/* ============================================================
   Animation Set D — stuttery, digital corruption (403, 429, etc.)
   ============================================================ */

.anim-d[b-sor1s6qvdy]::before {
    animation: noise-d1-b-sor1s6qvdy 2.8s infinite linear alternate-reverse;
}
.anim-d[b-sor1s6qvdy]::after {
    animation: noise-d2-b-sor1s6qvdy 2.2s infinite linear alternate-reverse;
}

@keyframes noise-d1-b-sor1s6qvdy {
    0%   { clip: rect(52px, 9999px, 58px, 0); }
    1%   { clip: rect(8px, 9999px, 76px, 0); }
    2%   { clip: rect(94px, 9999px, 100px, 0); }
    18%  { clip: rect(22px, 9999px, 28px, 0); }
    30%  { clip: rect(4px, 9999px, 64px, 0); }
    31%  { clip: rect(80px, 9999px, 86px, 0); }
    32%  { clip: rect(38px, 9999px, 44px, 0); }
    50%  { clip: rect(12px, 9999px, 90px, 0); }
    65%  { clip: rect(68px, 9999px, 74px, 0); }
    66%  { clip: rect(2px, 9999px, 48px, 0); }
    67%  { clip: rect(106px, 9999px, 114px, 0); }
    80%  { clip: rect(56px, 9999px, 62px, 0); }
    92%  { clip: rect(16px, 9999px, 84px, 0); }
    93%  { clip: rect(72px, 9999px, 78px, 0); }
    100% { clip: rect(32px, 9999px, 70px, 0); }
}

@keyframes noise-d2-b-sor1s6qvdy {
    0%   { clip: rect(40px, 9999px, 46px, 0); }
    3%   { clip: rect(6px, 9999px, 82px, 0); }
    4%   { clip: rect(88px, 9999px, 96px, 0); }
    20%  { clip: rect(28px, 9999px, 34px, 0); }
    35%  { clip: rect(10px, 9999px, 70px, 0); }
    36%  { clip: rect(100px, 9999px, 108px, 0); }
    52%  { clip: rect(46px, 9999px, 52px, 0); }
    53%  { clip: rect(2px, 9999px, 60px, 0); }
    70%  { clip: rect(76px, 9999px, 84px, 0); }
    83%  { clip: rect(14px, 9999px, 56px, 0); }
    84%  { clip: rect(92px, 9999px, 98px, 0); }
    96%  { clip: rect(34px, 9999px, 42px, 0); }
    100% { clip: rect(62px, 9999px, 74px, 0); }
}

/* --- Override: more aggressive glitch on the large error code --- */

.glitch-code.anim-a[b-sor1s6qvdy]::before { animation: noise-code-a1-b-sor1s6qvdy 2.5s infinite linear alternate-reverse; }
.glitch-code.anim-a[b-sor1s6qvdy]::after  { animation: noise-code-a2-b-sor1s6qvdy 1.8s infinite linear alternate-reverse; }
.glitch-code.anim-b[b-sor1s6qvdy]::before { animation: noise-code-b1-b-sor1s6qvdy 2s infinite linear alternate-reverse; }
.glitch-code.anim-b[b-sor1s6qvdy]::after  { animation: noise-code-b2-b-sor1s6qvdy 1.5s infinite linear alternate-reverse; }
.glitch-code.anim-c[b-sor1s6qvdy]::before { animation: noise-code-c1-b-sor1s6qvdy 3s infinite linear alternate-reverse; }
.glitch-code.anim-c[b-sor1s6qvdy]::after  { animation: noise-code-c2-b-sor1s6qvdy 2.4s infinite linear alternate-reverse; }
.glitch-code.anim-d[b-sor1s6qvdy]::before { animation: noise-code-d1-b-sor1s6qvdy 2.2s infinite linear alternate-reverse; }
.glitch-code.anim-d[b-sor1s6qvdy]::after  { animation: noise-code-d2-b-sor1s6qvdy 1.6s infinite linear alternate-reverse; }

@keyframes noise-code-a1-b-sor1s6qvdy {
    0%   { clip: rect(4px, 9999px, 110px, 0); }
    3%   { clip: rect(60px, 9999px, 72px, 0); }
    6%   { clip: rect(2px, 9999px, 88px, 0); }
    10%  { clip: rect(100px, 9999px, 130px, 0); }
    14%  { clip: rect(20px, 9999px, 36px, 0); }
    19%  { clip: rect(6px, 9999px, 120px, 0); }
    20%  { clip: rect(76px, 9999px, 84px, 0); }
    32%  { clip: rect(10px, 9999px, 98px, 0); }
    38%  { clip: rect(50px, 9999px, 58px, 0); }
    42%  { clip: rect(0px, 9999px, 200px, 0); }
    43%  { clip: rect(2px, 9999px, 78px, 0); }
    55%  { clip: rect(90px, 9999px, 140px, 0); }
    60%  { clip: rect(30px, 9999px, 46px, 0); }
    66%  { clip: rect(8px, 9999px, 106px, 0); }
    72%  { clip: rect(64px, 9999px, 70px, 0); }
    80%  { clip: rect(4px, 9999px, 92px, 0); }
    86%  { clip: rect(110px, 9999px, 150px, 0); }
    89%  { clip: rect(120px, 9999px, 168px, 0); }
    92%  { clip: rect(14px, 9999px, 68px, 0); }
    100% { clip: rect(40px, 9999px, 52px, 0); }
}

@keyframes noise-code-a2-b-sor1s6qvdy {
    0%   { clip: rect(18px, 9999px, 96px, 0); }
    5%   { clip: rect(82px, 9999px, 90px, 0); }
    8%   { clip: rect(4px, 9999px, 116px, 0); }
    16%  { clip: rect(56px, 9999px, 64px, 0); }
    25%  { clip: rect(8px, 9999px, 84px, 0); }
    30%  { clip: rect(100px, 9999px, 136px, 0); }
    40%  { clip: rect(24px, 9999px, 40px, 0); }
    48%  { clip: rect(6px, 9999px, 102px, 0); }
    58%  { clip: rect(70px, 9999px, 78px, 0); }
    62%  { clip: rect(100px, 9999px, 168px, 0); }
    65%  { clip: rect(2px, 9999px, 74px, 0); }
    75%  { clip: rect(44px, 9999px, 52px, 0); }
    82%  { clip: rect(0px, 9999px, 200px, 0); }
    83%  { clip: rect(10px, 9999px, 126px, 0); }
    90%  { clip: rect(86px, 9999px, 94px, 0); }
    100% { clip: rect(12px, 9999px, 60px, 0); }
}

@keyframes noise-code-b1-b-sor1s6qvdy {
    0%   { clip: rect(8px, 9999px, 94px, 0); }
    2%   { clip: rect(70px, 9999px, 78px, 0); }
    4%   { clip: rect(2px, 9999px, 108px, 0); }
    12%  { clip: rect(44px, 9999px, 52px, 0); }
    18%  { clip: rect(6px, 9999px, 86px, 0); }
    19%  { clip: rect(96px, 9999px, 132px, 0); }
    30%  { clip: rect(22px, 9999px, 30px, 0); }
    36%  { clip: rect(4px, 9999px, 100px, 0); }
    40%  { clip: rect(110px, 9999px, 168px, 0); }
    45%  { clip: rect(58px, 9999px, 66px, 0); }
    50%  { clip: rect(10px, 9999px, 76px, 0); }
    60%  { clip: rect(84px, 9999px, 120px, 0); }
    67%  { clip: rect(0px, 9999px, 200px, 0); }
    68%  { clip: rect(32px, 9999px, 40px, 0); }
    75%  { clip: rect(6px, 9999px, 114px, 0); }
    82%  { clip: rect(48px, 9999px, 56px, 0); }
    90%  { clip: rect(2px, 9999px, 92px, 0); }
    100% { clip: rect(104px, 9999px, 142px, 0); }
}

@keyframes noise-code-b2-b-sor1s6qvdy {
    0%   { clip: rect(36px, 9999px, 44px, 0); }
    5%   { clip: rect(4px, 9999px, 102px, 0); }
    6%   { clip: rect(80px, 9999px, 88px, 0); }
    18%  { clip: rect(8px, 9999px, 72px, 0); }
    28%  { clip: rect(92px, 9999px, 128px, 0); }
    35%  { clip: rect(16px, 9999px, 24px, 0); }
    43%  { clip: rect(0px, 9999px, 200px, 0); }
    44%  { clip: rect(2px, 9999px, 96px, 0); }
    54%  { clip: rect(54px, 9999px, 62px, 0); }
    62%  { clip: rect(6px, 9999px, 110px, 0); }
    72%  { clip: rect(66px, 9999px, 74px, 0); }
    75%  { clip: rect(90px, 9999px, 168px, 0); }
    80%  { clip: rect(10px, 9999px, 82px, 0); }
    88%  { clip: rect(100px, 9999px, 138px, 0); }
    100% { clip: rect(26px, 9999px, 58px, 0); }
}

@keyframes noise-code-c1-b-sor1s6qvdy {
    0%   { clip: rect(2px, 9999px, 120px, 0); }
    10%  { clip: rect(54px, 9999px, 62px, 0); }
    22%  { clip: rect(6px, 9999px, 104px, 0); }
    23%  { clip: rect(78px, 9999px, 86px, 0); }
    38%  { clip: rect(4px, 9999px, 92px, 0); }
    44%  { clip: rect(96px, 9999px, 168px, 0); }
    50%  { clip: rect(110px, 9999px, 148px, 0); }
    58%  { clip: rect(8px, 9999px, 80px, 0); }
    68%  { clip: rect(34px, 9999px, 42px, 0); }
    78%  { clip: rect(2px, 9999px, 136px, 0); }
    85%  { clip: rect(0px, 9999px, 200px, 0); }
    86%  { clip: rect(64px, 9999px, 72px, 0); }
    100% { clip: rect(10px, 9999px, 88px, 0); }
}

@keyframes noise-code-c2-b-sor1s6qvdy {
    0%   { clip: rect(14px, 9999px, 98px, 0); }
    12%  { clip: rect(86px, 9999px, 94px, 0); }
    24%  { clip: rect(4px, 9999px, 116px, 0); }
    36%  { clip: rect(42px, 9999px, 50px, 0); }
    48%  { clip: rect(6px, 9999px, 108px, 0); }
    53%  { clip: rect(0px, 9999px, 200px, 0); }
    54%  { clip: rect(72px, 9999px, 80px, 0); }
    66%  { clip: rect(2px, 9999px, 76px, 0); }
    78%  { clip: rect(96px, 9999px, 132px, 0); }
    88%  { clip: rect(20px, 9999px, 60px, 0); }
    93%  { clip: rect(84px, 9999px, 168px, 0); }
    100% { clip: rect(8px, 9999px, 124px, 0); }
}

@keyframes noise-code-d1-b-sor1s6qvdy {
    0%   { clip: rect(6px, 9999px, 100px, 0); }
    1%   { clip: rect(66px, 9999px, 74px, 0); }
    3%   { clip: rect(2px, 9999px, 118px, 0); }
    16%  { clip: rect(40px, 9999px, 48px, 0); }
    28%  { clip: rect(8px, 9999px, 88px, 0); }
    29%  { clip: rect(0px, 9999px, 200px, 0); }
    30%  { clip: rect(94px, 9999px, 130px, 0); }
    30%  { clip: rect(18px, 9999px, 26px, 0); }
    46%  { clip: rect(4px, 9999px, 112px, 0); }
    60%  { clip: rect(56px, 9999px, 64px, 0); }
    64%  { clip: rect(104px, 9999px, 168px, 0); }
    70%  { clip: rect(2px, 9999px, 82px, 0); }
    80%  { clip: rect(104px, 9999px, 144px, 0); }
    88%  { clip: rect(30px, 9999px, 38px, 0); }
    94%  { clip: rect(10px, 9999px, 96px, 0); }
    100% { clip: rect(74px, 9999px, 82px, 0); }
}

@keyframes noise-code-d2-b-sor1s6qvdy {
    0%   { clip: rect(22px, 9999px, 86px, 0); }
    4%   { clip: rect(78px, 9999px, 86px, 0); }
    5%   { clip: rect(4px, 9999px, 106px, 0); }
    20%  { clip: rect(48px, 9999px, 56px, 0); }
    32%  { clip: rect(6px, 9999px, 94px, 0); }
    42%  { clip: rect(88px, 9999px, 124px, 0); }
    47%  { clip: rect(114px, 9999px, 168px, 0); }
    52%  { clip: rect(14px, 9999px, 22px, 0); }
    62%  { clip: rect(2px, 9999px, 114px, 0); }
    72%  { clip: rect(60px, 9999px, 68px, 0); }
    76%  { clip: rect(0px, 9999px, 200px, 0); }
    77%  { clip: rect(8px, 9999px, 76px, 0); }
    90%  { clip: rect(98px, 9999px, 136px, 0); }
    100% { clip: rect(34px, 9999px, 70px, 0); }
}

/* --- Compact mode (embedded inside a parent container) --- */

.glitch-compact[b-sor1s6qvdy] {
    min-height: 60vh;
    padding: 32px 0;
}

/* --- Responsive --- */

@media (max-width: 700px) {
    .glitch[b-sor1s6qvdy] {
        width: 90vw;
    }
    .glitch-code[b-sor1s6qvdy] {
        font-size: 100px !important;
    }
    .glitch-title[b-sor1s6qvdy] {
        font-size: 48px;
    }
}
/* _content/Annopei/Shared/MainLayout.razor.rz.scp.css */
/* _content/Annopei/Shared/NoLayout.razor.rz.scp.css */