* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body{
background: linear-gradient(to right, #110f20, #121024) !important;
}

.navbar{
    background-color: #24133f !important;
    opacity: 0.99;
}

.navbar .nav-link,
.navbar .navbar-brand{
    color: white !important;
}

.navbar .nav-link:hover {
    color: #c4b5fd !important;
}

.images-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.image-box {
    flex: 0 0 auto;
    width: 200px;
    height: 300px;
    border-radius: 6px;
    position: relative;
    display: block;
    opacity: 0;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateY(40px) scale(0.95) translateZ(0);
    transition: all 0.6s ease;
    cursor: pointer;
}

.image-box.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.image-box .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.image-box:hover {
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

/* Overlay com botão Minha Lista */
.image-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 15px;
    pointer-events: auto;
}

.image-box:hover .overlay {
    opacity: 1;
}

.add-to-list {
    background: rgba(255,255,255,0.3);
    border: 2px solid white;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
}

.add-to-list:hover {
    background: white;
    color: black;
}

/* Barra de progresso */
.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 5;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: red;
  border-radius: 3px;
  transition: width 0.5s ease;
}


.movie-page{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:black;
}

.video-container video {
    width: 1100px; /* tamanho fixo para vídeo */
    height: auto; /* Mantém proporção */
    border-radius: 10px; /* Cantos arredondados */
}

video::cue {
  font-size: 50px;
  color: white;
  text-align: center;
}

.btn-close{
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
}

#continuar-section{
margin-top:40px;
position:relative;
z-index:1;
}

#novidades{
margin-top:40px;
}

#minha-lista-section{
margin-top:40px;
}

h3{
font-family: 'Verdana', sans-serif;
font-weight: bold;
font-size:20px;
}

.navbar-brand{
    cursor: pointer;
}


.hero{
height:75vh;
position:relative;
overflow:hidden;
min-height:500px;
z-index:2;
}

.hero-slide{
height:75vh;
width:100%;

display:flex;
align-items:center;

padding-left:60px;

color:white;

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.carousel-item{
width:100%;
height:100%;
transition: transform 0.8s ease;
}

.carousel-inner{
height:100%;
}

.hero-content{
position:relative;
z-index:2;
max-width:500px;
}

.hero-slide::before{
content:"";

position:absolute;
top:0;
left:0;
right:0;
bottom:0;

background:linear-gradient(
to right,
rgba(0,0,0,0.7),
rgba(0,0,0,0.3),
transparent
);

z-index:1;
}

.hero1 { background-image: url('img/background/bolha.jpg'); }
.hero2 { background-image: url('img/background/zumbi.jpg'); }
.hero3 { background-image: url('img/background/terceiro.webp'); }

.btn {
background: white; /* Fundo escuro */
color: #222; /* Texto branco */
border-radius: 10px; /* Bordas arredondadas */
cursor: pointer; /* Cursor de clique */
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, border 0.3s ease-in-out;  /* Transição suave de cor */
}

.btn:hover{
    border: white 1px solid; /* Borda branca ao passar mouse */
        background-color: #222; /* Cor ao passar mouse */
        color: white;
        transform: scale(1.1); /* Texto branco ao passar mouse */
}

.senha-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0b0b0b;
}

.senha-inputs input {
  width: 50px;
  height: 60px;
  margin: 8px;
  font-size: 28px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid #444;
  background: #111;
  color: white;
  transition: 0.2s;
}

.senha-inputs input:focus {
  border-color: #c4b5fd;
  box-shadow: 0 0 10px #c4b5fd;
  outline: none;
}

.erro {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.loader-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0b0b0b;
    z-index: 2500;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.loader-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-logo {
  width: 100px;
  height: 100px;
  animation: spin 1.5s infinite ease-in-out;
}

/* animação simples */
@keyframes spin {
  0% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) rotate(360deg);
    opacity: 0.7;
  }
}