#transition-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 9999;
}
body.fade-out #transition-canvas {
  opacity: 1;
  pointer-events: all;
}
.col {
    padding: 15px !important;
}

.card-img-top {
    border-radius: 5px;
    size-adjust: cover;
}

/* A perspectiva fica no contêiner que envolve todos os cards */
#projetos .row { 
  perspective: 1000px;
}

/* Suavidade + performance */
#projetos .card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  will-change: transform;
}

/* Elevação base no hover (todas as posições) */
#projetos .card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.30);
  z-index: 5;
}

/* Origem da transformação p/ acentuar o “dobrar” */
#projetos .col:nth-child(3n+1) .card { transform-origin: left center; }
#projetos .col:nth-child(3n+3) .card { transform-origin: right center; }

/* Esquerda: inclina levemente p/ dentro */
#projetos .col:nth-child(3n+1) .card:hover {
  transform: translateY(-10px) scale(1.03) rotateY(-6deg);
}

/* Meio: reto */
#projetos .col:nth-child(3n+2) .card:hover {
  transform: translateY(-10px) scale(1.03);
}

/* Direita: inclina p/ dentro no outro sentido */
#projetos .col:nth-child(3n+3) .card:hover {
  transform: translateY(-10px) scale(1.03) rotateY(6deg);
}

/* Responsivo: em telas menores (1 por linha), mantem só a elevação */
@media (max-width: 767.98px) {
  #projetos .card:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

.header {
    background-image: url(../assets/images/Coelho/DesignSemNome.png) !important; /* Caminho da imagem */
    background-size: cover; /* Preenche a área */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-attachment: fixed; /* Fixa a imagem de fundo */
    height: 100vh; /* Ocupa a altura total da tela */
    width: 100%; /* Largura total */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Ajuste para visibilidade */
}

.nav-title 
{
    font-family: 'lato', sans-serif !important;
    font-weight: bold !important;
    font-size: 2rem;
    color: #ffffff !important;
}


.jumbotron{
    background-color: #d2d2d200;
    z-index: 0;
}

.navbar-brand{
    margin: 0%;
}

.nav-link 
{
    padding: 0px;
    font-family: 'lato', sans-serif !important;
    font-size: 1.1rem;
    color: #ffffff !important;
    transition: all 0.3s ease; /* Transição suave */
}
.nav-link:hover {
    color: #d2d2d2 !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.navbar-img {
    width: 14vh;
}

.btn-custom {
    font-family: 'lato', sans-serif !important;
    border: 2px solid #235A8C; /* Define a borda laranja */
    background-color: transparent; /* Fundo transparente */
    color: #235A8C; /* Texto laranja */
    transition: box-shadow 0.3s ease; /* Transição suave para a sombra */
    border-radius: 0%;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
.btn-custom:hover {
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px #235A8C;
}

/* Navbar com gradiente */
.bg-gradient {
    background-color: rgba(220, 220, 220, 0); /* Gradiente de fundo */
    position: relative; /* Necessário para a camada overlay */
    z-index: 0; /* Define a camada de fundo */
}

.body
{
    background: rgb(220, 220, 220)
}

h1, h2, h3, h4, h5, p, a{
    font-family: 'lato', sans-serif !important;
}

/* Define o estado inicial da animação */
.section 
{
    opacity: 0; /* Invisível inicialmente */
    transform: translateY(30px); /* Posiciona ligeiramente abaixo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transição suave */
}

/* Estado final - quando a classe 'visible' for adicionada */
.section.visible
{
    opacity: 1;
    transform: translateY(0); /* Volta à posição normal */
}


#canvas1 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(#afafaf, #3d3d3d);
}

.love-btn {
    position: fixed;
    top: 20px;
    right: 25px;
    font-size: 30px;
    z-index: 9999;
    color: red;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
    text-decoration: none;
    outline: none;
}

.love-btn:hover,
.love-btn:focus,
.love-btn:active {
    transform: scale(1.3);
    text-decoration: none;
    outline: none;
    box-shadow: none;
}