@charset "utf-8";
/* CSS Document */
@font-face{
	font-family: CinzelDecorative;
	src: url("fonts/CinzelDecorative-Bold.ttf");
}

body, html{
	opacity: 1;
	margin:0px;
	padding: 0px;
	height: 100vh;
	width: 100%;
	scroll-behavior: smooth;
	overflow: hidden;
}

body.invert-colors {
    filter: invert(1) saturate(3);
    transition: filter 1s ease;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
	
}

.headphones{
	color: #DFDFDF;
	position: absolute;
	top: 75vh;
	font-size: 20px;
	font-family: "EB Garamond", serif;
	font-weight: 400;
}

.langtxt {
	font-family: CinzelDecorative;
	color: #DFDFDF;
	text-align: center;
	font-size: 45px;
	margin-top: -30vh
}

.play-button {
    background: none;
    border: none;
    cursor: pointer;
	position: absolute;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.play {
	cursor: pointer;
	background-color: transparent;
	font-size: 1.5em;
	border: none;
}

.languages{
	height: 100vh;
	background-image: url("imagens/languages.png");
	background-size:cover;
	background-position: center;
}

.button-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.button-container {
    display: flex;
    gap: 100px;
	padding-bottom: 40px;
	padding-left: 60px;
}

.button-image {
    height: auto;
    cursor: pointer;
    transition: transform 0.3s;
}

.button-image:hover {
    transform: scale(1.1);
}

.wrapper {
    position: relative;
    display: flex;
    width: 1000vw;
    height: 100vh;
    scroll-behavior: smooth;
}

.wrapper-overlay {
    position: relative;
    top: -100vh;
    left: 3vw;
    width: 1000vw;
    height: 100vh;
    z-index: 9998;
    pointer-events: none;
}

.page {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  font-size: 2rem;
  background-color: #f4f4f4;
  border-right: 1px solid #ccc;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}

.seta {
	text-decoration: none;
	color: inherit;
	align-content: center;
	position: absolute;
	top: 45vh;
	z-index: 1;
	pointer-events: all;
}

.page1{
	background-position: center;
	position: relative;
	background-image: url("imagens/lobo2branco.png");
	background-size: cover;
	width: 100vw;
	height: 100vh;
}

.page2{
	background-image: url("imagens/background1.png");
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page3{
	background-image: url("imagens/background2.png");
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.capuchinho3 {
    position: absolute;
    left: 40vw;
    height: 100vh;
    z-index: 0;
}

.start-capuchinho3 {
    animation: walkback 11s linear infinite, step-motion 1.5s ease-in-out infinite;
}

@keyframes walkback {
    from {
        left: 45vw;
    }
    to {
        left: -50vw;
    }
}

@keyframes step-motion {
    0% { transform: translateY(0); }       /* Neutral */
    25% { transform: translateY(-5px); }  /* Slight lift (step up) */
    50% { transform: translateY(0); }     /* Back to ground */
    75% { transform: translateY(5px); }   /* Slight dip (preparing next step) */
    100% { transform: translateY(0); }    /* Back to neutral */
}

.page4{
	background-image: url("imagens/background3.png");
	background-position: bottom left;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page5{
	background-image: url("imagens/background4.png");
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page6{
	background-image: url("imagens/background5.gif");
    width: 100vw;
    height: 100vh;
    background-repeat: repeat-x; /* Ensures seamless horizontal repetition */
    background-size: auto 100%; /* Scale to fit height while maintaining aspect ratio */
    background-position: 0 0; /* Start position */
	display: none;
  }

  /* Animation applied when the class is added */
.start-bg6 {
	display: block;
    animation: moveBackground 63s linear infinite; /* Infinite loop animation */
	animation-delay: 2s;
  }

  @keyframes moveBackground {
    from {
      background-position: 0 0; /* Start at the initial position */
    }
    to {
      background-position: 1000% 0; /* Move one full image width to the left */
    }
  }

.capuchinho6 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 38vh;
    left: 478vw;
    height: 100vh;
    z-index: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

.start-capuchinho6 {
    visibility: visible;
    opacity: 1;
    animation: walkin 3s ease-out forwards;
}

@keyframes walkin {
    from {
        left: 478vw;
    }
    to {
        left: 530vw;
    }
}

.page7{
	background-image: url("imagens/background6.png");
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
	z-index: 0;
}

.page7-2 {
    background-image: url("imagens/background6-2.png");
    background-position: center;
    background-size: cover;
	top: auto;
    width: 100vw;
    height: 0vh; /* Start with a height of 0 */
    position: absolute;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: hidden; /* Prevent content from spilling out */
	transform-origin: bottom center;
}

@keyframes slideUp {
    0% {
        height: 0vh; /* Start with height 0 */
		top: 100vh;
    }
    100% {
        height: 100vh; /* Expand to full height */
		top: 0vh;
    }
}

.start-slide-up {
	animation-delay: 6s;
    animation: slideUp 2s ease-in forwards; /* Apply the height animation */
}

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

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

#olhos6.start-fade-in {
    animation: fadeIn 0.1s ease-out forwards;
    animation-delay: 3s;
}

#capuchinho_baixa.start-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

#capuchinho_dpe.start-fade-out {
    animation: fadeout 0.5s ease-out forwards;
	animation-delay: 0.2S;
}

.page8{
	background-image: url("imagens/background7.png");
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page9{
	background-image: url("imagens/background8.gif");
	background-position: bottom center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page10{
	background-color: #0B0B0B;
	width: 100vw;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
	background-repeat: no-repeat;
}


.overlaystory{
	position: absolute;
    top: 0vh;
    height: 100vh;
    z-index: 1;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Eye Animation */

.eyeback{
    position: fixed;
    top: 50%;
    transform: translateY(-65%);
    width: 100%;
    text-align: center;
    background-color: #E6E6E6;
}

.eye{
    width: 120px;
    height: 70px;
    background: #fff;
    display: inline-block;
    margin: 40px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transform: rotate(10deg)
}

.ball{
    width: 35px;
    height: 35px;
    background: #A30000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 8px solid #111111;
}

.ball.reset {
	position: absolute;
	z-index: 9999;
    transition: transform 0.5s ease, left 0.5s ease, top 0.5s ease;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/* Aura */

.aura-animation {
	opacity: 90%;
	filter: blur(2px);
    animation: growSpin 10s infinite; /* Adjust duration and repeat as needed */
    transform-origin: center; /* Ensure scaling and rotation occur from the center */
	animation-timing-function: linear;
}

@keyframes growSpin {
    0% {
        transform: scale(1) rotate(0deg);
    }
	20%{
		transform: scale(2) rotate(122deg);
	}
    40% {
        transform: scale(1.5) rotate(288deg);
    }
	60% {
        transform: scale(3) rotate(432deg);
    }
	80% {
        transform: scale(2.5) rotate(576deg);
    }
    100% {
        transform: scale(1) rotate(720deg);
    }
}

#right-arm-container, #left-arm-container {
    position: absolute;
    bottom: -70vh; /* Position the containers at the bottom */
}

#right-arm {

    position: absolute;
    transform-origin: bottom left; /* Set pivot point to bottom center */
    transition: transform 1s ease-in-out; /* Smooth rotation */
}

#left-arm {

    position: absolute;
    transform-origin: bottom right; /* Set pivot point to bottom center */
    transition: transform 1s ease-in-out; /* Smooth rotation */
}

.rotate-left {
    transform: rotate(120deg); /* Rotate the left arm to the right */
}

.rotate-right {
    transform: rotate(-120deg); /* Rotate the right arm to the left */
}