@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(to bottom, #f6a300 0, #f6a300 70%, #000000 30%);
    margin: 0;
	overflow:hidden !important
}

.tooltip {
    position: fixed; /* Altere para fixed para seguir o cursor */
    background: #333;
    color: #fff;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	font-size:13px;
	letter-spacing:1px;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.door-container,
.door,
.mao,
.bola,
.logo,
.handle,
.lock,
.key {
    animation: fadeIn 1s ease-out;
}

.door-container {
    perspective: 1000px;
}

.door {
    position: relative;
    width: 290px;
    height: 535px;
    background: url(images/porta.png) center center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: left center;
    transition: transform 2s ease-in-out;
	cursor:pointer
}

.bola {
    position: absolute;
    bottom: -10px;
    left: -55px; /* Inicializa fora da tela à esquerda */
    width: 100px;
    height: 100px;
    background: url(images/bola.png) center center;
    opacity: 1;
    transition: opacity 1s ease; /* Transição para o fade */
}

.bola.roll {
    animation: rollRight 1s forwards, rotateBall 1s forwards, fadeOut 1s 3s forwards;
}

@keyframes rollRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(330px);
    }
}

@keyframes rotateBall {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.mao {
    position: absolute;
    top: 48%;
    left: -50px; /* Inicializa fora da tela à esquerda */
    width: 62px;
    height: 46px;
    background: url(images/mao.png) center center;
    opacity: 1;
    transition: opacity 1s ease; /* Transição para o fade */
    animation: moveHand 4s linear infinite;
}

@keyframes moveHand {
    0%, 100% {
        transform: translateX(0); /* Inicia sem movimento */
    }
    25% {
        transform: translateX(10px); /* Move 20px para a direita */
    }
	50% {
        transform: translateX(0px); /* Move 20px para a direita */
    }
    75% {
        transform: translateX(-10px); /* Move 20px para a esquerda */
    }
	100% {
        transform: translateX(0); /* Move 20px para a esquerda */
    }
}

.logo {
    position: absolute;
    top: -15px; /* Inicializa a posição no topo */
    left: 20px;
    width: 240px;
    height: 100px;
    background: url(images/logo.png) center center;
    animation: floatUpDown 5s ease-in-out infinite alternate;
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Altere a distância conforme necessário */
    }
}

.handle {
    position: absolute;
    top: 49.5%;  /* Ajustado para subir um pouco */
    left: 24px;
    width: 44px;
    height: 14px;
    background: url(images/macaneta.png) center center;
    border-radius: 3px;
    transform: rotate(0deg); /* Iniciar na horizontal */
    transform-origin: right center;
    transition: transform 1s ease-in-out;
    cursor: pointer;
}

.handle.incline {
    top: 50%;
	transform: rotate(12deg); /* Inclinação da maçaneta */
}

.lock {
    position: absolute;
    bottom: 244px;  /* Ajustado para subir um pouco */
    left: 26px;
    width: 8px;
    height: 7px;
    background-color: #222;
    border-radius: 10px;
}

.lock::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background-color: #222;
    border-radius: 10px 10px 0 0;
}

.key {
    position: absolute;
    bottom: -20px; /* Posiciona a chave 20px mais abaixo */
    right: -295px; /* Inicialmente posicionada à direita da fechadura */
    width: 20px;
    height: 40px;
    background: url(images/chave.png) center center;
    background-size: 100%;
    transform: translateY(0) rotate(0deg) scale(1.5); /* Ajuste o scale inicial para 1.5 */
    transform-origin: bottom center;
    transition: transform 2s ease-in-out;
}

.unlock .door {
    transform: rotateY(-70deg); /* Abertura da porta */
    transition: transform 1s ease-in-out 1s; /* Atraso na animação para sincronizar com a maçaneta */
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}