@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gira-borda { to { --giro: 360deg; } }
.topo {
  position: fixed; left: var(--margem); right: var(--margem); top: 12px; z-index: 60; height: 60px; pointer-events: none;
  transition: opacity .8s .5s, transform .8s .5s var(--ease);
}
.ilha {
  --raio: calc(var(--raio-botao) + 8px); --meia: 30px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 18px; border-radius: var(--raio); pointer-events: auto;
  background: rgba(12, 12, 13, .78); border: 1px solid transparent;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  clip-path: inset(0 calc(50% - var(--meia)) round var(--raio));
  transition: clip-path .75s var(--ease), border-color .5s;
}
.ilha::after {
  content: ""; position: absolute; left: calc(50% - var(--meia)); top: -1px; width: calc(var(--meia) * 2); height: calc(var(--meia) * 2);
  box-sizing: border-box; padding: 1.5px; border-radius: var(--raio); pointer-events: none;
  background: conic-gradient(from var(--giro), var(--azul-claro), rgba(108, 139, 255, 0) 30%, rgba(108, 139, 255, 0) 70%, var(--azul-claro));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s;
}
.ilha-simbolo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .3s, transform .5s var(--ease); }
.ilha-simbolo .marca-simbolo { width: 28px; height: 28px; }
.ilha > .marca, .ilha-links, .ilha-cta { opacity: 0; transition: opacity .3s; }
.ilha:hover, .ilha:focus-within, .topo-aberto .ilha { clip-path: inset(0 0 round var(--raio)); border-color: var(--borda-2); }
.ilha:hover::after, .ilha:focus-within::after, .topo-aberto .ilha::after { opacity: 0; }
.ilha:hover .ilha-simbolo, .ilha:focus-within .ilha-simbolo, .topo-aberto .ilha-simbolo { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.ilha:hover > .marca, .ilha:hover .ilha-links, .ilha:hover .ilha-cta,
.ilha:focus-within > .marca, .ilha:focus-within .ilha-links, .ilha:focus-within .ilha-cta,
.topo-aberto .ilha > .marca, .topo-aberto .ilha-links, .topo-aberto .ilha-cta { opacity: 1; transition: opacity .45s .25s; }
.ilha-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; }
.ilha-links a { padding: 10px 16px; border-radius: var(--raio-botao); font: 400 15px/1 var(--f-titulo); letter-spacing: .02em; color: var(--suave); transition: color .3s, background-color .3s; }
.ilha-links a:hover { color: var(--texto); background: rgba(255, 255, 255, .06); }
.ilha-cta { height: 44px; }
.menu-botao {
  display: none; width: 44px; height: 44px; border: 1px solid var(--borda-2); border-radius: var(--raio-botao); background: rgba(255, 255, 255, .03);
  place-content: center; gap: 6px; cursor: pointer; transition: background-color .3s, border-color .3s;
}
.menu-botao:hover { background: var(--sup-2); border-color: #46464d; }
.menu-botao span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-aberto .menu-botao span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--fundo);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; padding: 100px var(--margem) 36px;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; border-top: 1px solid var(--borda); }
.menu nav a {
  padding: 18px 0; border-bottom: 1px solid var(--borda);
  font: 500 clamp(32px, 6vw, 72px)/1.05 var(--f-titulo); letter-spacing: -.01em; transition: color .3s;
}
.menu nav a span { display: inline-block; transition: transform .5s var(--ease); }
.menu nav a:hover { color: var(--azul-claro); }
.menu nav a:hover span { transform: translateX(12px); }
.menu .btn { align-self: flex-start; }
.intro:not(.entrou) .topo { opacity: 0; transform: translateY(-14px); }
@media (hover: none) and (min-width: 861px) {
  .ilha { clip-path: inset(0 0 round var(--raio)); border-color: var(--borda-2); }
  .ilha::after, .ilha-simbolo { opacity: 0; }
  .ilha > .marca, .ilha-links, .ilha-cta { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .ilha::after { animation: gira-borda 5s linear infinite; }
}
@media (max-width: 1100px) {
  .ilha-links a { padding: 10px 11px; }
}
@media (max-width: 860px) {
  .topo { top: 10px; height: 56px; }
  .ilha, .ilha:hover, .ilha:focus-within { clip-path: none; border-color: var(--borda-2); padding: 0 6px 0 16px; }
  .ilha::after, .ilha-simbolo, .ilha-links, .ilha-cta { display: none; }
  .ilha > .marca { opacity: 1; }
  .menu-botao { display: grid; }
}