/* anim.css — animações (header/footer 1x, conteúdo do meio sempre) */

/* =========================
   ENTRADA: HEADER + FOOTER (1x por tab)
========================= */

.top,
.bottom{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.chrome--in .top,
body.chrome--in .bottom{
  opacity: 1;
  transform: translateY(0);
}

/* depois da 1ª vez, fica estático (sem transição) */
body.chrome--no-anim .top,
body.chrome--no-anim .bottom{
  transition: none;
}

/* =========================
   ENTRADA: CONTEÚDO DO MEIO (sempre)
   (a tua 1ª página tem <main class="hero">)
========================= */

.page main.hero{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.content--in .page main.hero{
  opacity: 1;
  transform: translateY(0);
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .top, .bottom, .page main.hero{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   UNDERLINE PREMIUM (sem ícones)
   comprimento = texto (ignora padding)
   entra L→R e sai L→R
========================= */
.top__left a,
.top__nav a,
.bottom__terms,
.contact-info__value__link,
.about__link{
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;

  --px: 0px;
  --py: 0px;
  --ul-gap: -1px;
}

.top__nav a{
  --px: 8px;
  --py: 6px;
  padding: var(--py) var(--px);
}

.top__left a::after,
.top__nav a::after,
.bottom__terms::after,
.contact-info__value__link::after,
.about__link::after{
  content: "";
  position: absolute;
  left: var(--px);
  right: var(--px);
  bottom: calc(var(--py) + var(--ul-gap));
  height: 1px;
  background-color: currentColor;
  border-radius: 999px;

  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.top__left a:hover::after,
.top__nav a:hover::after,
.bottom__terms:hover::after,
.contact-info__value__link:hover::after,
.about__link:hover::after{
  transform: scaleX(1);
  transform-origin: left center;
}

.top__nav a[aria-current="page"]::after{
  transform: scaleX(1);
  transform-origin: left center;
}

.contact-info__value__link,
.about__link{
  --ul-gap: 2px;
}

.contact-info__value__link,
.about__value .about__link{
  --ul-gap: 0px;
}
/* 1) Ativa transições entre documentos (MPA) */
@view-transition {
  navigation: auto;
}

/* 2) Diz ao browser o que é “o mesmo” em ambas as páginas */
main { view-transition-name: content; }

/* 4) Anima só o conteúdo do meio (main) */
::view-transition-old(content){
  animation: contentOut .18s ease both;
}
::view-transition-new(content){
  animation: contentIn .28s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes contentOut{
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes contentIn{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation: none !important;
  }
}
/* ===== Glitch hover (JS-driven) ===== */
/* .glitch{
  position: relative;
  display: inline-block;
  cursor: default;
  user-select: none;
  width: fit-content;
  line-height: 1;
  isolation: isolate;
}

.glitch__base{
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.glitch__layer{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, clip-path, opacity, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.glitch.is-glitching .glitch__layer{
  opacity: 1;
  animation: glitchFlicker .32s steps(2, end) both;
}

/* layer A */
/*.glitch__layer--a{
  clip-path: inset(var(--a-top, 0%) 0 var(--a-bottom, 100%) 0);
  transform: translate3d(var(--a-tx, 0px), var(--a-ty, 0px), 0);
  text-shadow:
    -3px 0 var(--glitch-a),
    -4px 0 rgba(0, 229, 255, .18);
  filter: saturate(1.15);
  mix-blend-mode: screen;
}

/* layer B */
/*.glitch__layer--b{
  clip-path: inset(var(--b-top, 0%) 0 var(--b-bottom, 100%) 0);
  transform: translate3d(var(--b-tx, 0px), var(--b-ty, 0px), 0);
  text-shadow:
    3px 0 var(--glitch-b),
    4px 0 rgba(255, 59, 129, .16);
  filter: saturate(1.15);
  mix-blend-mode: screen;
}

@keyframes glitchFlicker{
  0%   { opacity: 0; }
  12%  { opacity: .95; }
  24%  { opacity: .55; }
  38%  { opacity: 1; }
  52%  { opacity: .72; }
  70%  { opacity: 1; }
  100% { opacity: .92; }
}

@media (prefers-reduced-motion: reduce){
  .glitch__layer{
    display: none;
    animation: none !important;
  }
}

.hero-title-glitch{
  position: relative;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  cursor: default;
  margin: 0;
  isolation: isolate;
}

.hero-title-glitch__text{
  position: relative;
  display: inline-block;
  width: fit-content;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, filter;
}

.hero-title-glitch.is-glitching .hero-title-glitch__text{
  animation: heroGlitchBase .34s steps(2, end) both;
}

.hero-title-glitch.is-glitching .hero-title-glitch__text::before,
.hero-title-glitch.is-glitching .hero-title-glitch__text::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: transform, clip-path, opacity, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-title-glitch.is-glitching .hero-title-glitch__text::before{
  color: inherit;
  text-shadow:
    -2px 0 var(--glitch-a, #00e5ff),
    -4px 0 rgba(0, 229, 255, .18);
  transform: translate3d(-3px, 0, 0);
  clip-path: inset(6% 0 54% 0);
  opacity: .95;
  mix-blend-mode: screen;
  animation: heroGlitchSliceA .34s steps(2, end) both;
}

.hero-title-glitch.is-glitching .hero-title-glitch__text::after{
  color: inherit;
  text-shadow:
    2px 0 var(--glitch-b, #ff3b81),
    4px 0 rgba(255, 59, 129, .16);
  transform: translate3d(3px, 0, 0);
  clip-path: inset(54% 0 8% 0);
  opacity: .95;
  mix-blend-mode: screen;
  animation: heroGlitchSliceB .34s steps(2, end) both;
}

@keyframes heroGlitchBase{
  0%{
    transform: translate3d(0,0,0);
    filter: blur(0);
  }
  18%{
    transform: translate3d(-1px,0,0);
  }
  32%{
    transform: translate3d(1px,0,0);
  }
  48%{
    transform: translate3d(-2px,0,0);
    filter: blur(.15px);
  }
  66%{
    transform: translate3d(1px,0,0);
  }
  100%{
    transform: translate3d(0,0,0);
    filter: blur(0);
  }
}

@keyframes heroGlitchSliceA{
  0%{
    opacity: 0;
    transform: translate3d(0,0,0);
    clip-path: inset(0 0 100% 0);
  }
  18%{
    opacity: .95;
    transform: translate3d(-4px,-1px,0);
    clip-path: inset(8% 0 60% 0);
  }
  42%{
    transform: translate3d(3px,1px,0);
    clip-path: inset(38% 0 28% 0);
  }
  72%{
    transform: translate3d(-3px,0,0);
    clip-path: inset(74% 0 6% 0);
  }
  100%{
    opacity: 0;
    transform: translate3d(0,0,0);
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes heroGlitchSliceB{
  0%{
    opacity: 0;
    transform: translate3d(0,0,0);
    clip-path: inset(100% 0 0 0);
  }
  16%{
    opacity: .95;
    transform: translate3d(4px,1px,0);
    clip-path: inset(14% 0 58% 0);
  }
  44%{
    transform: translate3d(-3px,-1px,0);
    clip-path: inset(50% 0 18% 0);
  }
  74%{
    transform: translate3d(3px,0,0);
    clip-path: inset(80% 0 4% 0);
  }
  100%{
    opacity: 0;
    transform: translate3d(0,0,0);
    clip-path: inset(100% 0 0 0);
  }
}