/* =======================================================
   DISSACRAZIONE
   Global Stylesheet - Fixed & Unified
======================================================= */

:root{
    /* ---------- Background ---------- */
    --background-image: url("https://i.postimg.cc/mgk9Qn22/dithered-image-2026-06-25T090300-113.png");

    /* ---------- Colors ---------- */
    --white:#ffffff;
    --black:#000000;
    --red:#ab0000;
    --overlay:rgba(0,0,0,.18);
    --input:rgba(0,0,0,.72);
    --border:rgba(255,255,255,.55);
    --hover:#ffffff;
}

/* ==================================== */
/* RESET & GLOBAL CURSOR */
/* ==================================== */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body, a, button, .menu-item {
    cursor: url("cursor.png") 16 0, auto !important;
}

/* ==================================== */
/* BODY STYLE */
/* ==================================== */
body {
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background-image:var(--background-image);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:opacity .8s ease;
}

body.fade {
    opacity:0;
}

/* ==================================== */
/* CURSORES DE HOVER SPECÍFICOS */
/* ==================================== */
#realInput:hover {
    cursor: url("cursor.png") 16 0, text !important;
}

#submitButton:hover {
    background: white;
    color: black;
    cursor: url("cursor.png") 16 0, pointer !important;
}

/* ==================================== */
/* INTERFACE INTERATIVA DO MAPA */
/* ==================================== */
.menu-item {
    position: absolute;
    display: inline-block;
    user-select: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

/* Tamanho padrão para as imagens normais */
.menu-item img {
    width: 100px;
    height: auto;
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease;
    opacity: 0.85;
}

/* Texto centralizado e flutuando dentro da imagem */
.menu-item span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(5px); 
    font-family: "Jacquard 12", system-ui, serif;
    font-size: 1.2rem; 
    font-weight: normal; 
    color: #ffffff;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0; 
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 3;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
}

/* Efeito de zoom, rotação e escurecimento no Hover */
.menu-item:hover {
    transform: scale(1.15) rotate(4deg);
    z-index: 4;
}

.menu-item:hover img {
    filter: brightness(0.4) contrast(1.1); 
    opacity: 1;
}

.menu-item:hover span {
    opacity: 1;
    transform: translate(-50%, -50%); 
}

/* AJUSTES FINOS DE TAMANHO CUSTOMIZADO */
.readings img { width: 150px; height: auto; }
.projects img { width: 210px; height: auto; }
.diary span { font-size: 1.4rem; }

/* ==================================== */
/* COORDENADAS DE POSICIONAMENTO DO MAPA */
/* ==================================== */
.about      { top: 05%; left: 59%; transform: rotate(-5deg); }
.readings   { top: 70%; left: 70%; transform: rotate(8deg); }
.music      { top: 40%; left: 70%; transform: rotate(-3deg); }
.visions    { top: 60%; left: 25%; }
.shrines    { top: 60%; left: 75%; }
.diary      { top: 40%; left: 81%; transform: rotate(12deg); } 
.projects   { top: 30%; left: 61%; transform: rotate(-7deg); } 
.return-sanctuary { 
    position: absolute;
    top: 92%; 
    
    left: 60%; 
    
    transform: translate(-50%, -50%) rotate(0deg) !important; 
    z-index: 5;
    
    /* ADICIONADO: Garante que o texto flutuante não jogue o medalhão para o lado */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.return-sanctuary img { 
    width: 100px; 
    height: auto; 
    display: block;
}

/* Força o comportamento estático e reto também no hover */
.return-sanctuary:hover {
    transform: translate(-50%, -50%) scale(1.1) rotate(0deg) !important;
}


/* ==================================== */
/* CENÁRIO: TEXTO DE BOAS-VINDAS FIXO (MOLDURA ESQUERDA) */
/* ==================================== */

.scenery-welcome {
    position: absolute;
    top: 67%;
    left: 12.5%;
    transform: translate(-50%, -50%);
    z-index: 1; 
    
    width: 140px; 
    
    /* CORRIGIDO: Ativa o empilhamento vertical correto do texto + imagem */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    font-family: "Jacquard 12", system-ui, serif;
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 0.03em;
    
    color: #ffffff;
    user-select: none;
    pointer-events: none; 
    
    text-shadow: 
        1px 1px 1px #000000,
       -1px -1px 1px #000000,
        1px -1px 1px #000000,
       -1px 1px 1px #000000;
       
    opacity: 0.9;
}

/* ==================================== */
/* COORDENADAS E TAMANHO DO PANINHO */
/* ==================================== */
.scenery-decor {
    position: absolute;
    
    /* COORDENADAS: Altere estes dois valores em % para arrastar para onde quiser */
    top: 88%;   /* Aumente para descer, diminua para subir */
    left: 16.25%; /* Aumente para ir para a direita, diminua para a esquerda */
    transform: translate(-50%, -50%);
    
    z-index: 1;
    width: 95px; /* Tamanho da imagem */
    height: auto;
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8));
}


/* ==================================== */
/* EFEITO DE TV ANTIGA (CRT SCANLINES) */
/* ==================================== */
.crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

.crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.crt {
    animation: textShadow 1.6s infinite;
}

/* ==================================== */
/* OUTROS COMPONENTES LEGADOS */
/* ==================================== */
#overlay {
    position:absolute;
    inset:0;
    background:var(--overlay);
    z-index:1;
}

.container {
    position:relative;
    z-index:2;
    width:min(420px,90vw);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
}

h1 {
    color:var(--white);
    font-family:"Jacquard 12", serif;
    font-size:clamp(3rem,5vw,4.8rem);
    font-weight:400;
    letter-spacing:.05em;
    text-align:center;
    text-shadow: 2px 2px 0 black, 0 0 8px rgba(0,0,0,.75);
}

.input-wrapper {
    position:relative;
    width:260px;
    height:54px;
}

#realInput {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:text;
    z-index:3;
}

#zalgoDisplay {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--input);
    border:1px solid var(--border);
    color:white;
    font-family:"Jacquard 12", serif;
    font-size:1.7rem;
    letter-spacing:.08em;
    text-align:center;
    user-select:none;
    white-space:nowrap;
    overflow:hidden;
    transition: border-color .3s, background .3s;
}

.input-wrapper:focus-within #zalgoDisplay {
    border-color:white;
    background:black;
}

#submitButton {
    width:260px;
    height:52px;
    background:black;
    color:white;
    border:1px solid white;
    cursor:pointer;
    font-family:"Jacquard 12", serif;
    font-size:1.7rem;
    transition: background .25s, color .25s, border-color .25s;
}

#error {
    min-height:24px;
    opacity:0;
    color:white;
    text-align:center;
    font-family:"Jacquard 12", serif;
    font-size:1.2rem;
    letter-spacing:.04em;
    text-shadow: 2px 2px 0 black;
    transition:opacity .4s ease;
}

#error.show { opacity:1; }
.cursor { animation:blink 1s infinite; }

@keyframes blink { 50% { opacity:0; } }

/* ==================================== */
/* ANIMAÇÕES DO ENGINE ORIGINAL */
/* ==================================== */
@keyframes flicker {
    0% { opacity: 0.27; }
    50% { opacity: 0.95; }
    100% { opacity: 0.24; }
}

@keyframes textShadow {
    0%, 100% { text-shadow: 0.5px 0 1px rgba(0,30,255,0.5), -0.5px 0 1px rgba(255,0,80,0.3); }
    50% { text-shadow: 2px 0 1px rgba(0,30,255,0.5), -2px 0 1px rgba(255,0,80,0.3); }
}

@keyframes shake {
    0%, 100% { transform: translate(0.5px, 0.5px); }
    50% { transform: translate(-0.5px, -1px); }
}

/* ==================================== */
/* MOBILE */
/* ==================================== */
@media (max-width:700px){
    h1 { font-size:3rem; }
    .input-wrapper, #submitButton { width:220px; }
}

/* ==================================== */
/* POSICIONAMENTO DA PLAQUINHA DE SAÍDA */
/* ==================================== */
.scenery-decor2 {
    position: absolute;
    
    /* MANTIDO: Suas coordenadas originais intactas */
    top: 95%;   
    left: 94%;  
    transform: translate(-50%, -50%) !important;
    
    z-index: 5; 
    display: inline-block;
    user-select: none;
}

/* Estilo da imagem interna */
.scenery-decor2 .hover-img {
    width: 250px; 
    height: auto;
    display: block;
    opacity: 0.85; 
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8));
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Texto flutuando invisível no centro da imagem */
.scenery-decor2 span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    font-family: "Jacquard 12", system-ui, serif;
    font-size: 1.4rem; 
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 6;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
}

/* ==================================== */
/* BLOQUEIO DE MOVIMENTO NO HOVER (TRAVADO) */
/* ==================================== */
.scenery-decor2:hover {
    /* TRAVADO: Garante que a caixa principal não saia do lugar de jeito nenhum */
    transform: translate(-50%, -50%) scale(1) !important;
}

.scenery-decor2:hover .hover-img {
    /* Apenas escurece a imagem estiticamente */
    filter: brightness(0.4) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8)) !important;
    opacity: 1;
    transform: none !important; /* Corta qualquer movimento na imagem interna */
}

.scenery-decor2:hover span {
    /* Revela o texto sem mover */
    opacity: 1;
    transform: translate(-50%, -50%) !important;
}