/* 🟢 CONFIGURAÇÃO DE FONTES E CORES GERAIS */

@font-face {
    font-family: 'Segoe Script';
    src: url('https://entrenos.neocities.org/Inicio/fontes/Segoe Script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root {
    --cor-primaria: #fff;
    --cor-secundaria: #daa520; /* Dourado */
    --cor-fundo: #000;
}
body {
    background-color: var(--cor-fundo);
    margin: 0;
    text-align: center;
    font-family: sans-serif;
    color: var(--cor-primaria);
    padding-top: 0;
}

/* 🟢 ESTILOS BÁSICOS DO HEADER, LOGO E NAVEGAÇÃO */
header { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 100;
    background-color: var(--cor-fundo); 
    padding: 20px 0; 
}
.logo-container { 
    text-align: center; 
    margin: 20px auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 120px; 
}
.logo-container img { display: block; object-fit: contain; opacity: 1; }
.logo-container .logo-left { width: 140px; height: 140px; }
.logo-container .logo-right { width: 130px; height: 130px; }
.logo-container .logo-text { 
    color: #fff; 
    font-size: 40px; 
    font-weight: bold; 
    font-family: 'Segoe Script', cursive, sans-serif; 
    line-height: 140px; 
}
.nav-menu { 
    margin-bottom: 60px; 
    margin-top: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.nav-menu a { 
    color: var(--cor-primaria); 
    font-weight: bold; 
    text-decoration: none; 
    cursor: pointer; 
    transition: color 0.3s, transform 0.3s; 
    position: relative; 
}
.nav-link, .pagina-atual { font-size: 26px; font-weight: bold; margin: 0 10px; }
.nav-link:hover { color: var(--cor-secundaria); transform: scale(1.1); }
.pagina-atual { color: var(--cor-secundaria) !important; }

/* 🟢 CONTROLES DE PARTILHA */

#shareButtonIcon {
    /* ... (Mantenha as regras anteriores aqui) ... */
    position: relative; 
    background: none; 
    border: none; 
    cursor: pointer;
    margin-left: 20px;
    padding: 5px;
}
#shareButtonIcon svg {
    /* AUMENTO DO TAMANHO AQUI */
    width: 36px;
    height: 36px;
    
    stroke: var(--cor-primaria);
    transition: stroke 0.3s;
}
#shareButtonIcon:hover svg {
    stroke: var(--cor-secundaria);
}
#shareButtonIcon:hover svg {
    stroke: var(--cor-secundaria);
}

/* 🟢 A caixa de mensagem agora aparece à DIREITA do botão */

#copy-message-inline {
    position: absolute;
    left: 110%; /* Posiciona 110% à esquerda do botão, empurrando a mensagem para a DIREITA */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--cor-secundaria);
    border: 1px solid var(--cor-secundaria);
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 16px;
    z-index: 1000;
}
#copy-message-inline.visible {
    opacity: 1;
    visibility: visible;
}

/* 🟢 REGRAS DE LAYOUT CRÍTICAS DO SLIDER (16:9) */

main { 
    width: 1024px; 
    margin: 40px auto 0 auto; 
    padding-bottom: 80px; 
    overflow: hidden; 
    position: relative; 
    min-height: 576px; 
}
.display-wrapper { 
    position: relative; 
    width: 1024px; 
    height: 576px; /* FORMATO 16:9 */
    overflow: hidden; 
    z-index: 10; 
    margin: 40px auto 0 auto; 
}
#custom-slider { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: 10; 
    perspective: 1200px; 
}

/*🟢  Moldura preenche 100% do container 16:9 */

#main_overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 20; 
    pointer-events: none; 
    object-fit: fill; 
}

/* --- ESTILOS BASE DO SLIDE e IMAGEM --- */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-style: preserve-3d;
    transform: none;
    filter: none;
    clip-path: none;
    will-change: opacity, transform, filter, clip-path;
}
.slide.active {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, filter 0.8s ease-in-out, clip-path 0.8s ease-in-out;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform, filter;
    transition: transform 1.2s ease-out, filter 0.8s ease-in-out;
}
.slide.active img {
    transform: scale(1);
    filter: blur(0px);
}

/* CLASSE DE LIMPEZA CRÍTICA: Reseta o estado dos slides que saem (CORRIGIDO COM !important) */
.slide.leaving {
    opacity: 0 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}
.slide.leaving img {
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* 🟢 OS 15 EFEITOS DE TRANSIÇÃO */

/*  1.🟠  Slide In (Usa container) */

.slide.slide-in { transform: translateX(-100%); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.slide-in { transform: translateX(0); }

/* 2.🟠  Zoom In (Usa imagem) */

.slide.zoom-in img { transform: scale(1.1); } 
.slide.active.zoom-in img { transform: scale(1); }

/* 3.🟠  Rotate Zoom (Usa container) */
.slide.rotate-zoom { transform: scale(0.5) rotateY(180deg); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.rotate-zoom { transform: scale(1) rotateY(0deg); }

/* 4.🟠  Blur Fade (Usa container) */
.slide.blur-fade { filter: blur(20px); transition: opacity 0.8s ease-in-out, filter 0.8s ease-in-out; }
.slide.active.blur-fade { filter: blur(0px); }

/* 5.🟠  Push Up (Usa container) */
.slide.push-up { transform: translateY(100%); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.push-up { transform: translateY(0); }

/* 6.🟠  Bottom Glide (Usa imagem) */
.slide.bottom-glide img { transform: translateY(10%); } 
.slide.active.bottom-glide img { transform: translateY(0); }

/* 7.🟠  Light Shift (Usa container) */
.slide.light-shift { filter: brightness(0.1); transition: opacity 0.8s ease-in-out, filter 0.8s ease-in-out; }
.slide.active.light-shift { filter: brightness(1); }

/* 8.🟠  Clip Path Circle (Usa container) */
.slide.clip-path-circle { clip-path: circle(0% at 50% 50%); transition: opacity 0.8s ease-in-out, clip-path 0.8s ease-in-out; }
.slide.active.clip-path-circle { clip-path: circle(75% at 50% 50%); }

/* 9.🟠  Horizontal Perspective (Usa container) */
.slide.h-perspective { transform: rotateY(90deg) scale(0.8); transform-origin: left; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.h-perspective { transform: rotateY(0deg) scale(1); }

/* 10.🟠  Scale Down (Usa container) */
.slide.scale-down { transform: scale(1.5); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.scale-down { transform: scale(1); }

/* 11.🟠  Diagonal Wipe (Usa container) */
.slide.diagonal-wipe { clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%); transition: opacity 0.8s ease-in-out, clip-path 0.8s ease-in-out; }
.slide.active.diagonal-wipe { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

/* 12.🟠  Fade Unfold (Usa container) */
.slide.fade-unfold { transform: perspective(1000px) rotateX(90deg); opacity: 0.1; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.slide.active.fade-unfold { transform: perspective(1000px) rotateX(0deg); opacity: 1; }

/* 13.🟠  Zoom Out & Spin (Usa imagem) */
.slide.zoom-out-spin img { transform: scale(1.5) rotate(180deg); }
.slide.active.zoom-out-spin img { transform: scale(1) rotate(0deg); }

/* 14.🟠  Slide Down (Usa container) */
.slide.slide-down { transform: translateY(-100%); opacity: 1; transition: opacity 0.0s, transform 0.8s ease-in-out; }
.slide.active.slide-down { transform: translateY(0); opacity: 1; }

/* 15.🟠  Slide and Blur (Usa imagem) */
.slide.slide-blur img { transform: translateY(-2%); filter: blur(5px); }
.slide.active.slide-blur img { transform: translateY(0); filter: blur(0px); }

/* 🟢 CONTROLES DO SLIDER */

.slider-controls { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 9999; padding: 0; }
.control-btn { background: none; border: none; border-radius: 0; width: 50px; height: 50px; font-size: 1.5em; cursor: pointer; transition: background-color 0.3s, transform 0.1s, opacity 0.3s; pointer-events: auto; display: flex; justify-content: center; align-items: center; margin: 0 20px; }
.control-btn i { color: var(--cor-primaria); opacity: 0.3; transition: opacity 0.3s, color 0.3s; }
.control-btn:hover { background: rgba(255, 255, 255, 0.2); }
.control-btn:hover i { color: var(--cor-secundaria); opacity: 1; }
.control-btn:active { transform: scale(0.95); }
.play-pause-btn { position: static; width: 60px; height: 60px; font-size: 1.8em; order: 2; z-index: 99; }
#play-pause-btn { margin-bottom: -40px; }
#prev-btn { order: 1; }
#next-btn { order: 3; }

/* 🟢 Legendas do slide */

.legenda-topo, .legenda-inferior {
    position: absolute;
    color: var(--cor-secundaria);
    font-size: 2em;
    white-space: nowrap;
    z-index: 15;
    opacity: 0;
    font-family: 'Segoe Script', cursive, sans-serif;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: none;
}

/* 1. 🥇 LEGENDA SUPERIOR: Slide da Esquerda para o Centro */

.legenda-topo {
    top: 5%;
    left: 50%;
    transform: translateX(-160%);
}
.slide.active .legenda-topo {
    opacity: 1;
    transform: translateX(-50%);
}
/* 2. 🥈 LEGENDA INFERIOR: Rodopiante e Alinhada à Direita */
.legenda-inferior {
    bottom: 5%;
    right: 50px;
    transform: perspective(1000px) rotateX(-90deg) translateX(50px);
}
.slide.active .legenda-inferior {
    opacity: 1;
    transform: perspective(0) rotateX(0deg) translateX(0);
}

/* 🟢 CONTROLES DE ÁUDIO */

#audio-controls { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 1024px; 
    padding: 10px 0; 
    margin: 20px auto 20px auto; 
    position: relative; 
    z-index: 5; 
}
#audio-button { 
    padding: 8px 15px; 
    cursor: pointer; 
    background-color: transparent; 
    border: 1px solid var(--cor-primaria); 
    color: var(--cor-primaria); 
    border-radius: 10px; 
    font-weight: bold; 
    transition: color 0.3s, border-color 0.3s; 
    display: inline-block; 
    z-index: 15; 
}
#audio-button:hover { color: var(--cor-secundaria); border-color: var(--cor-secundaria); }
#equalizer { display: flex; align-items: flex-end; height: 30px; margin-left: 10px; }
.bar { width: 4px; height: 2px; background-color: var(--cor-secundaria); margin: 0 1px; transition: height 0.2s ease; }