/* ================================================
   DEEP WEB MANIFEST — WATCHING EYES THEME
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cinzel+Decorative:wght@700;900&family=IM+Fell+English:ital@0;1&display=swap');

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

html { scroll-behavior: smooth; }

/* ══ VIDEO OVERLAY (tam ekran ani flaş) ══ */
#watch-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
#watch-overlay.active {
    opacity: 1;
    visibility: visible;
}
#watch-overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.3);
}

/* ══ INLINE VİDEO BLOK ══ */
.inline-video-block {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.4s ease, transform 1.4s ease;
    border: 1px solid #1a1a1a;
}
.inline-video-block.visible {
    opacity: 1;
    transform: translateY(0);
}
.inline-vid {
    width: 100%;
    display: block;
    filter: grayscale(1) brightness(0.75) contrast(1.2);
}
.inline-vid-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 8px;
    color: #2a2a2a;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

:root {
    --black:   #000;
    --dark:    #080808;
    --border:  #1c1c1c;
    --dimtext: #404040;
    --midtext: #787878;
    --text:    #b0b0b0;
    --bright:  #d8d8d8;
    --white:   #ececec;
}

body {
    background: var(--black);
    color: var(--text);
    font-family: 'IM Fell English', serif;
    font-size: 16px;
    line-height: 1.95;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ══ BACKGROUND: WATCHING EYES ══ */
#bg-eyes {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('bg_eyes.png');
    background-size: cover;
    background-position: center;
    filter: brightness(0.18) contrast(1.5) grayscale(1);
    opacity: 0;
    transform: scale(1.04);
    animation:
        eyes-reveal  8s ease forwards,
        eyes-breathe 20s ease-in-out 8s infinite;
}

@keyframes eyes-reveal {
    0%   { opacity: 0; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1.04); }
}

@keyframes eyes-breathe {
    0%, 100% { filter: brightness(0.18) contrast(1.5) grayscale(1); transform: scale(1.04); }
    50%       { filter: brightness(0.26) contrast(1.6) grayscale(1); transform: scale(1.06); }
}

/* Slow random eye flicker — JS adds/removes class */
#bg-eyes.flicker {
    filter: brightness(0.38) contrast(1.7) grayscale(1) !important;
}

/* ══ FOG ══ */
#bg-fog {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 160% 50% at 50% 110%, transparent 0%, rgba(0,0,0,0.75) 55%, #000 88%),
        radial-gradient(ellipse 100% 80% at 0% 50%,   rgba(0,0,0,0.6) 0%, transparent 60%),
        radial-gradient(ellipse 100% 80% at 100% 50%, rgba(0,0,0,0.6) 0%, transparent 60%);
    animation: fog-move 30s ease-in-out infinite;
}

@keyframes fog-move {
    0%, 100% { transform: scale(1) translateX(0); }
    33%       { transform: scale(1.03) translateX(-1.5%); }
    66%       { transform: scale(0.98) translateX(1.5%); }
}

/* ══ PARTICLES ══ */
#particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ══ VIGNETTE ══ */
.vignette {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 25%,
        rgba(0,0,0,0.45) 60%,
        rgba(0,0,0,0.88) 100%);
}

/* ══ SCANLINES ══ */
.scanlines {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.18) 3px,
        rgba(0,0,0,0.18) 4px
    );
}

/* ══ INTRO ══ */
#intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 2s ease, visibility 2s ease;
}
#intro.gone { opacity: 0; visibility: hidden; }

#intro-inner { text-align: center; user-select: none; }

#intro-symbol {
    font-size: 7rem;
    color: #fff;
    opacity: 0.8;
    display: block;
    margin-bottom: 2rem;
    animation: sym-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 50px rgba(255,255,255,0.2));
}

@keyframes sym-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.6; }
    50%       { transform: scale(1.06); opacity: 0.9; }
}

#intro-msg {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 5px;
    color: #444;
    text-transform: uppercase;
    height: 1.5em;
    margin-bottom: 2.5rem;
    animation: msg-blink 1s step-end infinite;
}

@keyframes msg-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

#intro-cta {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1rem;
    color: #2a2a2a;
    line-height: 1.8;
    animation: cta-glow 4s ease-in-out infinite;
}

#intro-cta span {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-family: 'Cinzel', serif;
    letter-spacing: 4px;
    color: #1e1e1e;
    margin-top: 6px;
}

@keyframes cta-glow {
    0%, 100% { color: #2a2a2a; }
    50%       { color: #555; }
}

/* ══ SITE ══ */
#site {
    position: relative;
    z-index: 10;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 28px 120px;
}

#site.hidden { visibility: hidden; opacity: 0; }

@keyframes site-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ HEADER ══ */
#top {
    text-align: center;
    padding: 110px 0 80px;
    margin-bottom: 90px;
    border-bottom: 1px solid var(--border);
}

#main-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.5rem, 3.8vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 5px;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    text-shadow: 0 0 60px rgba(255,255,255,0.08);
    animation: title-glitch 9s infinite;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
}
.glitch::before { color: #aaa; animation: gb 9s infinite; clip-path: polygon(0 0,100% 0,100% 45%,0 45%); }
.glitch::after  { color: #777; animation: ga 9s infinite; clip-path: polygon(0 60%,100% 60%,100% 100%,0 100%); }

@keyframes title-glitch {
    0%,93%,100% { transform: translate(0); }
    94% { transform: translate(-3px,1px); }
    95% { transform: translate(3px,-1px); }
    96% { transform: translate(-2px,2px); }
    97% { transform: translate(2px,-2px); }
    98% { transform: translate(0); }
}
@keyframes gb {
    0%,92%,100% { opacity:0; transform:translate(0); }
    93% { opacity:.7; transform:translate(-4px,0); }
    94% { opacity:.7; transform:translate(4px,0); }
    95% { opacity:0; }
}
@keyframes ga {
    0%,92%,100% { opacity:0; transform:translate(0); }
    94% { opacity:.6; transform:translate(4px,0); }
    95% { opacity:.6; transform:translate(-4px,0); }
    96% { opacity:0; }
}

/* ══ BLOCKS ══ */
#content {
    display: flex;
    flex-direction: column;
    gap: 75px;
}

.block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.3s ease, transform 1.3s ease;
    padding-left: 28px;
    border-left: 1px solid var(--border);
    position: relative;
}

.block::before {
    content: '';
    position: absolute;
    left: -1px; top: 0;
    width: 1px; height: 0;
    background: var(--dimtext);
    transition: height 1.6s ease;
}

.block.visible { opacity: 1; transform: translateY(0); }
.block.visible::before { height: 100%; }

.btitle {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 7px;
    color: var(--dimtext);
    text-transform: uppercase;
    margin-bottom: 22px;
}

.block p {
    color: var(--midtext);
    font-size: 0.95rem;
    margin-bottom: 18px;
}
.block p:last-child { margin-bottom: 0; }

.block em {
    color: var(--white);
    font-style: italic;
}

/* ══ REFRAINS ══ */
.refrain {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.82rem, 1.8vw, 1rem);
    line-height: 2.3;
    color: var(--dimtext);
    letter-spacing: 1.5px;
    text-align: center;
    padding: 44px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 1.5s ease, transform 1.5s ease, color 1.5s ease;
}
.refrain.visible {
    opacity: 1;
    transform: scale(1);
    color: var(--midtext);
}
.refrain em {
    font-style: italic;
    color: var(--bright);
}

/* ══ FINALE ══ */
.finale {
    text-align: center;
    padding: 90px 16px;
    border-top: 1px solid var(--border);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}
.finale.visible { opacity: 1; transform: translateY(0); }

.finale p {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.88rem, 2.2vw, 1.1rem);
    line-height: 2.3;
    color: var(--midtext);
    letter-spacing: 2px;
}

.finale-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: 36px auto;
}

.finale-close {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: clamp(0.9rem, 2.2vw, 1.25rem) !important;
    color: var(--bright) !important;
    letter-spacing: 3px !important;
    text-shadow: 0 0 40px rgba(255,255,255,0.08);
}
.finale-close em { font-style: italic; color: var(--white); }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ══ RESPONSIVE ══ */
@media (max-width: 600px) {
    #site { padding: 0 18px 80px; }
    #top  { padding: 70px 0 50px; }
    .block { padding-left: 18px; }
}