/* Animação do underline a entrar de um lado e a sair para o outro */
@keyframes underline-in { /* Animação de entrada */
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: right;
  }
  50.01% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes underline-out { /* Animação de saída (unhover) */
  0% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50.01% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(1);
    transform-origin: right;
  }
}

/* Animação dos elementos ao dar scroll */
/* .autoShow { 
    animation: text-appear both 1.5s ease;  Aplica a animação 'text-appear' com duração de 1.5s 
    animation-timeline: view(); Animação é ativada com base na posição do elemento no viewport 
    animation-range: entry 20% cover 70vh;  A animação começa quando 20% do elemento entra na viewport e termina ao cobrir 70vh 
} */

/* Keyframes */
/* @keyframes text-appear {
    from {
        opacity: 1;
        transform: translateY(150px); /* Começa 150px abaixo da posição original 
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina na posição original 
    }
} 

.autoShow-featured {
    animation: text-appear both 1.5s ease;
    animation-timeline: view();
    animation-range: entry 50% cover 90vh;
}

@keyframes text-appear {
    from {
        opacity: 1;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 

.autoShow-image {
    animation: text-appear both 0.3s ease-in-out;
    animation-timeline: view();
    animation-range: entry 5% cover 70vh;
}

@keyframes text-appear {
    from {
        opacity: 1;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 

.autoShow-nextproject {
    animation: text-appear both 0.3s ease-in-out;
    animation-timeline: view();
    animation-range: entry 10% cover 70vh;
}

@keyframes text-appear {
    from {
        opacity: 1;
        transform: translateY(150px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 

.autoShow-footer {
    animation: text-appear both 1.5s ease;
    animation-timeline: view();
    animation-range: entry 1%;
}

@keyframes text-appear {
    from {
        opacity: 1;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 

/* animação seta */
.talk{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

/* texto */
.label{
  transition: transform .35s ease;
}

.label2{
  transition: transform .35s ease;
}

/* seta direita */
.arrow{
    position: relative;
    top: 1px;
  transition: transform .35s ease, opacity .2s ease;
}

.arrow2{
    position: relative;
    top: 2px;
  transition: transform .35s ease, opacity .2s ease;
}

/* seta esquerda falsa */
.talk::before{
  content: "↗";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: transform .35s ease, opacity .2s ease;
}

/* underline */
.talk::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  line-height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}

/* hover */
.talk:hover .label{
  transform: translateX(18px);
  transition-delay: .15s;
}

.talk:hover .label2{
  transform: translateX(22px);
  transition-delay: .15s;
}

.talk:hover .arrow{
  opacity: 0;
  transform: translateX(-6px);
  transition-delay: .15s;
}

.talk:hover .arrow2{
  opacity: 0;
  transform: translateX(-6px);
  transition-delay: .15s;
}

.talk:hover::before{
  opacity: 1;
  transform: translateX(0);
  transition-delay: .15s;
}

.talk:hover::after{
  transform: scaleX(1);
  transition-delay: .15s;
}

.talk:not(:hover)::after{
  transform-origin: right;
}

.swap{
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
}

/* textos */
.swap .line{
  display: block;
  transition: transform .45s ease;
}

/* seta: ajusta no baseline, não com top */
.swap .spanarrow{
  display: inline-block;
  vertical-align: -0.08em; /* <<< ajusta: -0.06em a -0.18em */
}

/* texto visível */
.swap .line-top{
  transform: translateY(0);
}

/* texto escondido */
.swap .line-bottom{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
}

/* hover */
.swap:hover .line-top{
  transform: translateY(-100%);
}

.swap:hover .line-bottom{
  transform: translateY(0);
}

/* ===== Loader BASE (isto garante o fundo preto) ===== */
#gg-loader{
  position: fixed;
  inset: 0;
  background: #000;
  color: #fafafa;
  z-index: 2147483647; /* máximo prático */
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: translateY(0);
}

/* scroll lock robusto */
html.gg-lock, body.gg-lock { height: 100%; overflow: hidden; }
body.gg-lock{
  position: fixed;
  width: 100%;
  top: var(--gg-scroll-top, 0px);
  left: 0;
  right: 0;
  touch-action: none;
}

/* ===== Layout interno ===== */
.gg-inner{
  position: relative;
  text-align: center;
  line-height: 1.16;
  overflow: hidden;
}

/* Nome aparece logo (SEM animação de entrada) */
.gg-type{
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  opacity: 1;
}

/* cada letra vira um span */
.gg-char{
  display: inline-block;
  will-change: transform, opacity;
}

/* Iniciais por cima (inicialmente escondidas) */
.gg-keep{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.01em;         /* lado a lado */
  opacity: 0;
  pointer-events: none;
}

.gg-keep span{
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  display: inline-block;
}

.gg-keep-left{ transform: translateX(-337px); }
.gg-keep-right{ transform: translateX(78px); }

/* ===== Animação: letra desaparece para cima ===== */
@keyframes ggUpDisappear {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(-93px); }
}

/* quando começa o fade: mostra iniciais e esconde os G “do texto” para não duplicar */
#gg-loader.gg-fade .gg-keep{
  opacity: 1;
  transition: opacity 150ms ease;
}

#gg-loader.gg-fade .gg-char[data-keep="1"]{
  opacity: 0; /* esconde os 2 G do texto */
}

#gg-loader.gg-fade .gg-char:not([data-keep="1"]):not([data-space="1"]){
  animation: ggUpDisappear var(--gg-dur, 260ms) ease forwards;
  animation-delay: var(--gg-delay, 0ms);
}

/* juntar GG lado a lado */
#gg-loader.gg-merge .gg-keep-left{
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
  transform: translateX(-3px);
}
#gg-loader.gg-merge .gg-keep-right{
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
  transform: translateX(3px);
}

/* sair para cima */
#gg-loader.gg-exit{
  transition: transform 900ms cubic-bezier(.2,.9,.2,1);
  transform: translateY(-110%);
}

/* Hero */
.gg-hero{
  min-height: 100vh;
  padding: 8rem 6vw;
  background: #fff;
  color: #111;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}

body.gg-visible .gg-hero{
  opacity: 1;
  transform: translateY(0);
}

/* Se tiveres reduce motion ligado, isto esconde a intro.
   PARA DEBUG: comenta este bloco se necessário. */
@media (prefers-reduced-motion: reduce){
  #gg-loader{ display:none; }
  .gg-hero{ opacity:1; transform:none; transition:none; }
}

/* animação opacity */
body {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* começa invisível */
body.page-enter {
  opacity: 0;
}

/* quando sai */
body.page-exit {
  opacity: 0;
}