/* 666 channel easter egg styles. stage comes from window.__ch666Stage
   (set by PHP), applied as html.ch666-stage-0 through ch666-stage-6 in
   channel_666.js

   10 refreshes  - avatar glitches
   15            - text glitches, audio gets weird
   16            - red tint
   17            - black circles
   18            - heavy glitching
   25 / unlocked - full creepy theme, stays banned page doesn't show anymore
*/

/* stage 0 hint - deliberately understated, easy to miss on a casual glance.
   small, low-contrast, tucked under the banned header. */
.ch666-s0-hint {
    margin-top: 4px;
    text-align: center;
    font-size: 10px;
    color: #cfcfcf;
    letter-spacing: 0.2px;
}

/* avatar glitch, stage 1+ */
html[class*="ch666-stage-"]:not(.ch666-stage-0) .avt,
html[class*="ch666-stage-"]:not(.ch666-stage-0) .pr_avt,
html[class*="ch666-stage-"]:not(.ch666-stage-0) .avt2 {
    animation: ch666_avatar_glitch 3.2s infinite;
}

@keyframes ch666_avatar_glitch {
    0%, 100% { filter: none; transform: translate(0, 0); }
    88% { filter: none; transform: translate(0, 0); }
    89% { filter: contrast(1.5) saturate(0.3) hue-rotate(40deg); transform: translate(-1px, 1px); }
    90% { filter: invert(0.6); transform: translate(1px, -1px); }
    91% { filter: none; transform: translate(0, 0); }
}

/* text glitch, stage 2+ */
html.ch666-stage-2 .pr_lks a,
html.ch666-stage-2 .hl_hd,
html.ch666-stage-2 .nm_hd,
html.ch666-stage-2 strong,
html.ch666-stage-3 .pr_lks a,
html.ch666-stage-3 .hl_hd,
html.ch666-stage-3 .nm_hd,
html.ch666-stage-3 strong,
html.ch666-stage-4 .pr_lks a,
html.ch666-stage-4 .hl_hd,
html.ch666-stage-4 .nm_hd,
html.ch666-stage-4 strong,
html.ch666-stage-5 .pr_lks a,
html.ch666-stage-5 .hl_hd,
html.ch666-stage-5 .nm_hd,
html.ch666-stage-5 strong,
html.ch666-stage-6 .pr_lks a,
html.ch666-stage-6 .hl_hd,
html.ch666-stage-6 .nm_hd,
html.ch666-stage-6 strong {
    animation: ch666_text_glitch 2.6s infinite;
}

@keyframes ch666_text_glitch {
    0%, 100% { text-shadow: none; }
    80% { text-shadow: none; }
    81% {
        text-shadow:
            -2px 0 rgba(255, 0, 0, 0.8),
            2px 0 rgba(0, 200, 255, 0.5),
            0 0 8px rgba(200, 0, 0, 0.7);
    }
    83% { text-shadow: none; }
    84% {
        text-shadow:
            2px 1px rgba(255, 0, 0, 0.8),
            -2px -1px rgba(0, 200, 255, 0.5);
    }
    86% { text-shadow: none; }
}

/* red tint, stage 3+ */
html.ch666-stage-3 body::before,
html.ch666-stage-4 body::before,
html.ch666-stage-5 body::before,
html.ch666-stage-6 body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999997;
    pointer-events: none;
    background: rgba(160, 0, 0, 0.38);
    mix-blend-mode: multiply;
    animation: ch666_red_pulse 2.2s infinite;
    box-shadow: inset 0 0 220px 60px rgba(80, 0, 0, 0.65);
}

@keyframes ch666_red_pulse {
    0%, 100% { background: rgba(150, 0, 0, 0.3); }
    40% { background: rgba(200, 0, 0, 0.5); }
    50% { background: rgba(120, 0, 0, 0.2); }
    60% { background: rgba(220, 0, 0, 0.55); }
}

/* black circles, stage 4+ */
html.ch666-stage-4 body::after,
html.ch666-stage-5 body::after,
html.ch666-stage-6 body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999998;
    pointer-events: none;
    background-image:
        radial-gradient(circle 18px at 12% 15%, #000 98%, transparent 100%),
        radial-gradient(circle 26px at 30% 40%, #000 98%, transparent 100%),
        radial-gradient(circle 14px at 55% 18%, #000 98%, transparent 100%),
        radial-gradient(circle 20px at 70% 55%, #000 98%, transparent 100%),
        radial-gradient(circle 12px at 85% 25%, #000 98%, transparent 100%),
        radial-gradient(circle 22px at 20% 70%, #000 98%, transparent 100%),
        radial-gradient(circle 16px at 45% 80%, #000 98%, transparent 100%),
        radial-gradient(circle 28px at 90% 80%, #000 98%, transparent 100%),
        radial-gradient(circle 10px at 65% 90%, #000 98%, transparent 100%),
        radial-gradient(circle 15px at 5% 50%, #000 98%, transparent 100%),
        radial-gradient(circle 19px at 95% 45%, #000 98%, transparent 100%),
        radial-gradient(circle 11px at 40% 8%, #000 98%, transparent 100%),
        radial-gradient(circle 23px at 60% 95%, #000 98%, transparent 100%);
    opacity: 0.92;
    animation: ch666_circles_drift 2.8s ease-in-out infinite;
}

@keyframes ch666_circles_drift {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* heavy glitching, stage 5+ */
html.ch666-stage-5 body,
html.ch666-stage-6 body {
    animation: ch666_heavy_jitter 2.4s infinite steps(1);
}

@keyframes ch666_heavy_jitter {
    0%, 100% { transform: translate(0, 0); filter: none; }
    55% { transform: translate(0, 0); filter: none; }
    56% { transform: translate(-7px, 4px) skewX(1deg); filter: contrast(1.9) brightness(0.6) saturate(1.6); }
    57% { transform: translate(6px, -5px) skewX(-1deg); filter: invert(0.35) hue-rotate(15deg); }
    58% { transform: translate(-3px, 2px); filter: contrast(2.1) brightness(0.5); }
    59% { transform: translate(0, 0); filter: none; }
    85% { transform: translate(0, 0); filter: none; }
    86% { transform: translate(5px, -3px); filter: contrast(1.8) brightness(0.65) invert(0.2); }
    87% { transform: translate(-4px, 3px); filter: none; }
}

/* Buttons, nav pills, and search box go solid black with a redacted look */
html.ch666-stage-5 .pr_tp_pl_nav a,
html.ch666-stage-5 input[type="text"],
html.ch666-stage-5 input[type="submit"],
html.ch666-stage-5 .yel_btn,
html.ch666-stage-6 .pr_tp_pl_nav a,
html.ch666-stage-6 input[type="text"],
html.ch666-stage-6 input[type="submit"],
html.ch666-stage-6 .yel_btn {
    background: #000 !important;
    color: #000 !important;
    border-radius: 4px;
    text-shadow: none !important;
    box-shadow: 0 0 10px rgba(200, 0, 0, 0.4);
    transition: background 0.2s;
}

html.ch666-stage-5 .pr_tp_pl_nav a:hover,
html.ch666-stage-6 .pr_tp_pl_nav a:hover {
    background: #2a0000 !important;
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.6);
}

/* unlocked - full theme, stage 6 */
html.ch666-stage-6 {
    animation: ch666_bg_pulse 3.2s infinite ease-in-out;
}

@keyframes ch666_bg_pulse {
    0%, 100% { filter: none; }
    40% { filter: none; }
    45% { filter: hue-rotate(-20deg) saturate(1.9) contrast(1.3) brightness(0.82); }
    50% { filter: none; }
    75% { filter: none; }
    78% { filter: hue-rotate(10deg) saturate(1.5) contrast(1.4) brightness(0.7); }
    80% { filter: none; }
}

html.ch666-stage-6 body {
    background-color: #050000 !important;
}

html.ch666-stage-6 .hl_hd,
html.ch666-stage-6 .nm_hd {
    background: #220000 !important;
    color: #ff1414 !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

html.ch666-stage-6 .hl_in,
html.ch666-stage-6 .nm_in {
    background: #0c0000 !important;
    color: #e08080 !important;
    border-color: #5a0000 !important;
}

/* CRT scanlines persist permanently once unlocked — heavier and redder */
html.ch666-stage-6 body::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.14) 3px,
        rgba(0, 0, 0, 0) 4px
    ), rgba(180, 0, 0, 0.22);
    animation: ch666_scanline_drift 4s linear infinite;
}

@keyframes ch666_scanline_drift {
    0% { background-position: 0 0; }
    100% { background-position: 0 200px; }
}

/* Continuous low-level breathing jitter so the unlocked state never sits
   fully still — reinforces that the channel stays "wrong" permanently */
html.ch666-stage-6 .hl_hd,
html.ch666-stage-6 .nm_hd,
html.ch666-stage-6 strong {
    animation: ch666_text_glitch 1.8s infinite;
}

/* Small persistent watermark, only visible once unlocked */
.ch666-watermark {
    position: fixed;
    bottom: 6px;
    right: 8px;
    z-index: 1000000;
    font-family: monospace;
    font-size: 11px;
    color: rgba(180, 0, 0, 0.55);
    pointer-events: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    html[class*="ch666-stage-"],
    html[class*="ch666-stage-"] body,
    html[class*="ch666-stage-"] body::before,
    html[class*="ch666-stage-"] body::after,
    html[class*="ch666-stage-"] .pr_lks a,
    html[class*="ch666-stage-"] .hl_hd,
    html[class*="ch666-stage-"] .nm_hd,
    html[class*="ch666-stage-"] strong,
    html[class*="ch666-stage-"] .avt,
    html[class*="ch666-stage-"] .pr_avt,
    html[class*="ch666-stage-"] .avt2 {
        animation: none !important;
    }
}

/* logo goes red/pink and warps once unlocked - #hd_vidlii covers every
   header variant, #logo is the fallback id some templates still use */
html.ch666-stage-6 #hd_vidlii,
html.ch666-stage-6 #logo {
    transform-origin: center center;
    animation: ch666_logo_warp 3.4s infinite;
}

@keyframes ch666_logo_warp {
    0%, 100% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 8px rgba(255, 20, 90, 0.75));
    }
    35% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 8px rgba(255, 20, 90, 0.75));
    }
    38% {
        transform: scaleX(1.18) scaleY(0.85) skewX(-6deg);
        filter: sepia(1) saturate(8) hue-rotate(310deg) brightness(0.6) contrast(1.7) invert(0.1)
                drop-shadow(0 0 18px rgba(255, 40, 120, 0.95));
    }
    41% {
        transform: scaleX(0.88) scaleY(1.15) skewX(5deg);
        filter: sepia(1) saturate(5) hue-rotate(280deg) brightness(1.1) contrast(1.4)
                drop-shadow(0 0 12px rgba(220, 0, 80, 0.8));
    }
    44% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 8px rgba(255, 20, 90, 0.75));
    }
    60% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 22px rgba(255, 40, 120, 1));
    }
    72% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 8px rgba(255, 20, 90, 0.75));
    }
    74% {
        transform: scaleX(1.1) scaleY(0.92) skewX(4deg) translateX(2px);
        filter: sepia(1) saturate(9) hue-rotate(320deg) brightness(0.55) contrast(1.8)
                drop-shadow(0 0 20px rgba(255, 20, 90, 1));
    }
    76% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        filter: sepia(1) saturate(6) hue-rotate(290deg) brightness(0.85) contrast(1.3)
                drop-shadow(0 0 8px rgba(255, 20, 90, 0.75));
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ch666-stage-6 #hd_vidlii,
    html.ch666-stage-6 #logo {
        animation: none !important;
        filter: sepia(1) saturate(5) hue-rotate(300deg) drop-shadow(0 0 10px rgba(255, 20, 90, 0.7)) !important;
    }
}

/* ============================================================
   Haunted takeover page (community.php / indexold.php final
   stage). This reuses the site's real .wdg / .h_l / .h_r layout
   classes so positioning matches the normal pages, but the
   surrounding page background goes near-black-red at stage 6
   (see html.ch666-stage-6 body above), so all text here needs
   its own high-contrast color instead of the site's default
   near-black text.
   ============================================================ */
/* ============================================================
   Watch page dizzy/bizarre effect. Only active on watch.php while
   666's video is playing with the easter egg unlocked (body gets
   .ch666-watch-haunted from page_structure.php). Distinct from the
   sitewide stage-6 red/scanline theme - this is specifically meant
   to feel disorienting while actually watching the video: a slow
   drifting tilt/zoom on the whole page, plus a colour-split
   "ghosting" pass drifting across the player itself.
   ============================================================ */
body.ch666-watch-haunted .wrapper {
    animation: ch666_dizzy_tilt 9s ease-in-out infinite;
    transform-origin: 50% 40%;
}

@keyframes ch666_dizzy_tilt {
    0%   { transform: rotate(0deg) scale(1); }
    22%  { transform: rotate(0.7deg) scale(1.006); }
    50%  { transform: rotate(0deg) scale(1); }
    76%  { transform: rotate(-0.7deg) scale(1.006); }
    100% { transform: rotate(0deg) scale(1); }
}

body.ch666-watch-haunted .vlPlayer,
body.ch666-watch-haunted .vlPlayer2007 {
    position: relative;
}

body.ch666-watch-haunted .vlPlayer::after,
body.ch666-watch-haunted .vlPlayer2007::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(100deg, rgba(255,0,60,0.10) 0%, transparent 35%, rgba(0,200,255,0.07) 65%, transparent 100%);
    animation: ch666_chroma_drift 5.5s ease-in-out infinite;
}

@keyframes ch666_chroma_drift {
    0%, 100% { transform: translateX(0) scale(1.01); opacity: 0.55; }
    50%      { transform: translateX(6px) scale(1.01); opacity: 1; }
}

/* deeper, slower breathing vignette than the sitewide stage-6 one,
   layered on top for the watch page specifically */
body.ch666-watch-haunted::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999998;
    box-shadow: inset 0 0 min(20vw, 220px) rgba(90, 0, 0, 0.55);
    animation: ch666_watch_vignette 7s ease-in-out infinite;
}

@keyframes ch666_watch_vignette {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.ch666-watch-haunted .wrapper,
    body.ch666-watch-haunted .vlPlayer::after,
    body.ch666-watch-haunted .vlPlayer2007::after,
    body.ch666-watch-haunted::after {
        animation: none !important;
    }
}

/* ============================================================
   Box overlay, stage 6 only. Applies /img/ch666_overlay.png on top
   of every rounded widget/panel box once unlocked - purely so it can
   be swapped for something else without touching any CSS. Replace
   the PNG at /img/ch666_overlay.png with any image you want; it
   tiles automatically and sits above the box's own background but
   below its text (z-index 1, content stays default stacking).
   ============================================================ */
html.ch666-stage-6 .wdg,
html.ch666-stage-6 .in_box,
html.ch666-stage-6 .ib_col {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

html.ch666-stage-6 .wdg::after,
html.ch666-stage-6 .in_box::after,
html.ch666-stage-6 .ib_col::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/img/ch666_overlay.png');
    background-repeat: repeat;
    background-size: 160px 160px;
    pointer-events: none;
    z-index: 1;
}

html.ch666-stage-6 .wdg > *,
html.ch666-stage-6 .in_box > *,
html.ch666-stage-6 .ib_col > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Second box overlay, stage 6 only. Same idea as the first, but
   covers every other box/panel style used across the classic (v1),
   modern (v2), and cosmic (v3) profile layouts, the banned page, and
   comment boxes - basically "every box" that isn't already covered
   by .wdg/.in_box/.ib_col above. Kept as a separate image
   (/img/ch666_overlay2.png) so it can be swapped independently of
   the first one.
   ============================================================ */
html.ch666-stage-6 .prbx_in,
html.ch666-stage-6 .hl_in,
html.ch666-stage-6 .nm_in,
html.ch666-stage-6 .out_box,
html.ch666-stage-6 .cosmic_about,
html.ch666-stage-6 .cosmic_d,
html.ch666-stage-6 .chn_cmt_sct,
html.ch666-stage-6 .ch_cmt,
html.ch666-stage-6 .comment_box {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

html.ch666-stage-6 .prbx_in::after,
html.ch666-stage-6 .hl_in::after,
html.ch666-stage-6 .nm_in::after,
html.ch666-stage-6 .out_box::after,
html.ch666-stage-6 .cosmic_about::after,
html.ch666-stage-6 .cosmic_d::after,
html.ch666-stage-6 .chn_cmt_sct::after,
html.ch666-stage-6 .ch_cmt::after,
html.ch666-stage-6 .comment_box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/img/ch666_overlay2.png');
    background-repeat: repeat;
    background-size: 160px 160px;
    pointer-events: none;
    z-index: 1;
}

html.ch666-stage-6 .prbx_in > *,
html.ch666-stage-6 .hl_in > *,
html.ch666-stage-6 .nm_in > *,
html.ch666-stage-6 .out_box > *,
html.ch666-stage-6 .cosmic_about > *,
html.ch666-stage-6 .cosmic_d > *,
html.ch666-stage-6 .chn_cmt_sct > *,
html.ch666-stage-6 .ch_cmt > *,
html.ch666-stage-6 .comment_box > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Page background placeholder, stage 6 only, and only on pages
   OTHER than the 666 channel's own profile/banned page (those use
   their own separate structure files and set body.ch666-site-page
   themselves via page_structure.php - the channel page never gets
   that class, so this rule never touches it). Replace
   /img/ch666_bg.png with whatever you want; it tiles automatically.
   ============================================================ */
html.ch666-stage-6 body.ch666-site-page {
    background-image: url('/img/ch666_bg.png');
    background-repeat: repeat;
}

.ch666-haunted-page {
    color: #ff3b3b;
}

.ch666-haunted-page .h_r {
    float: right;
}

.ch666-haunted-page .wdg {
    background: #0c0000;
    border: 1px solid #4a0000;
}

.ch666-haunted-page .wdg > div:first-of-type {
    background: #220000 !important;
    border-color: #4a0000 !important;
    color: #ff1414 !important;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

/* video titles, favorite titles, suggestion titles, comment "By:" lines -
   anything that would otherwise inherit near-black default text */
.ch666-haunted-page a,
.ch666-haunted-page strong,
.ch666-haunted-page .ba,
.ch666-haunted-page .ch_l {
    color: #ff5a5a !important;
}

.ch666-haunted-page div,
.ch666-haunted-page span,
.ch666-haunted-page .vw {
    color: #e08080;
}

.ch666-haunted-page #feature_suggestions strong,
.ch666-haunted-page #recent_comments a {
    color: #ff1414 !important;
}

.ch666-haunted-novideo {
    text-align: center;
    font-family: monospace;
    font-size: 80px;
    font-weight: bold;
    padding: 80px 0;
    color: #ff1414;
    text-shadow: 0 0 14px rgba(255, 0, 0, 0.8);
}

/* keep the two-column layout from collapsing - .h_l/.h_r already carry
   the real widths from m.css, this just makes sure the wrapper clears
   its floated children properly on every page that reuses this template */
.ch666-haunted-page::after {
    content: "";
    display: table;
    clear: both;
}